表边框间距不起作用

时间:2013-02-21 02:55:19

标签: html css

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

2 个答案:

答案 0 :(得分:11)

在你的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">

这将以所要求的方式解决问题,我认为

答案 1 :(得分:0)

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

.rightpadding
{
    padding-right: 5px;
}

您的<td>代码如下所示:

<td class="valigned rightpadding">