html - 表格边框间距不起作用

Question

我试图使用 CSS border-spacing 属性用空格分隔此表中的图像，但由于某种原因它不起作用。您可以在此处的 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>

Answer 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">

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