表格邊框間距不工作

我想要的圖片在這個表空間分開，使用CSS邊框間距屬性，但由於某種原因，它不工作。你可以看到圖像在這裏仍然粘在JSFiddle中：http://jsfiddle.net/nKgnq/表格邊框間距不工作

我試圖通過在圖像周圍放置填充來代替它，但無濟於事。我怎樣才能將這些照片分開？

生成表的代碼是在這裏：

<div class="table-right"> 
    <table class="fixed-height fixed-width fixed-cell"> 
     <tr> 
      <td class="valigned"><h3 class="date">Details</h3> 
       <?php the_field('details');?> 
      </td> 
      <td class="valigned"> 
       <a href="<?php echo MultiPostThumbnails::get_post_thumbnail_url(get_post_type(), 'secondary-image');?>"> 
        <img class="detail-image" src="<?php echo MultiPostThumbnails::get_post_thumbnail_url(get_post_type(), 'secondary-image');?>"> 
       </a> 
      </td> 
      <td class="valigned"> 
       <a href="<?php echo MultiPostThumbnails::get_post_thumbnail_url(get_post_type(), 'tertiary-image');?>"> 
        <img class="detail-image" src="<?php echo MultiPostThumbnails::get_post_thumbnail_url(get_post_type(), 'tertiary-image');?>"> 
       </a> 
      </td> 
      <td class="valigned"> 
       <a href="<?php echo MultiPostThumbnails::get_post_thumbnail_url(get_post_type(), 'fourth-image');?>"> 
        <img class="detail-image" src="<?php echo MultiPostThumbnails::get_post_thumbnail_url(get_post_type(), 'fourth-image');?>"> 
       </a> 
      </td> 
     </tr> 
    </table> 
</div>

來源

2013-02-21 vlyandra

你可以發佈與提琴工作圖像和只是不工作的代碼部分。 – ThinkingStiff 2013-02-21 02:57:51

您的jsfiddle充斥着破碎的形象等清潔你的jsfiddle是，我們越早將能夠幫助你 – abbood 2013-02-21 04:31:22

在你的CSS應用border-spacing:5px到table-right類，但你的表不使用，即使它包含在div你有適用於，因爲你有

table { /* tables still need 'cellspacing="0"' in the markup */ 
    border-collapse: separate; 
    border-spacing: 0; 
}

在你的css，這是一個更具體的選擇，並將覆蓋繼承的c ss來自div。如果你犯了一個類像

.table-spacing{ 
    border-spacing:5px; 
}

你可以應用到你的表標記

<table class="fixed-height fixed-width fixed-cell table-spacing">

，這將解決請求的方式問題，我覺得

來源

2013-02-21 05:55:46 andrwct

對我來說，'邊界崩潰：獨立;'正被'邊界崩潰覆蓋：倒塌;'最終成爲罪魁禍首。 – RCNeil 2014-02-05 16:10:45

@RCNeil - 你真正的MVP – mmcrae 2016-02-12 19:39:25

所以'邊界spacing'不除非'邊界崩潰工作：separate'也用它似乎？ http://www.w3schools.com/cssref/pr_border-spacing.asp似乎是這樣說的 – mmcrae 2016-02-12 19:40:10

這真的很難理解你的jsfiddle，但一般，一個方法是將填充你的<td>標籤。將一個額外的類（例如rightpadding）添加到要額外填充的<td>標記，然後在您的CSS中定義它。

.rightpadding 
{ 
    padding-right: 5px; 
}

和你<td>標籤應該是這樣的：

<td class="valigned rightpadding">

來源

2013-02-21 02:59:35

表格邊框間距不工作

回答

相關問題