表格边框间距不起作用答案

【问题标题】：Table border-spacing not working表格边框间距不起作用
【发布时间】：2013-02-21 02:55:18
【问题描述】：

我正在尝试使用 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>

【问题讨论】：

你能发布一个关于工作图像的小提琴，只是部分代码不起作用。
您的 jsfiddle 中充斥着损坏的图像等。您的 jsfiddle 越干净，我们就越早能够为您提供帮助

标签： html css

【解决方案1】：

在您的 css 中，您将 border-spacing:5px 应用于 table-right 类，但您的表不使用它，即使它包含在您应用的 div 中，因为您有

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

在您的 css 中，这是一个更具体的选择器，将覆盖从 div 继承的 css。如果你做一个像

这样的类

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

你可以将它应用到你的表格标签

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

我认为这将按照要求的方式解决问题

【讨论】：

对我来说，border-collapse: separate; 被 border-collapse: collapse; 覆盖，最终成为罪魁祸首。
@RCNeil - 你才是真正的 MVP
所以border-spacing 不起作用，除非border-collapse: separate 也被使用它似乎？ w3schools.com/cssref/pr_border-spacing.asp好像是这么说的

【解决方案2】：

真的很难理解你的 jsFiddle，但一般来说，一种方法是在你的 <td> 标签上添加填充。添加一个额外的类，例如rightpadding，到你想要额外填充的<td>标签，然后在你的CSS中定义它。

.rightpadding
{
    padding-right: 5px;
}

你的<td> 标签看起来像这样：

<td class="valigned rightpadding">

【讨论】：