Question

我有table其中我不想在每个padding上设置margin＆amp; /或td以在单元格之间应用一些间距，首先回答将使用CellSpacing的{{1}}和/或CellPadding属性，但当我使用这些属性时，它们会在每一侧（即顶部，底部，左侧和右侧）应用空间，但我只是想在顶部和底部应用空间。

我的问题有解决办法吗？

Answer 1

您始终可以padding使用<td>在表格单元格的顶部和底部留出空格。

要在表格行之间添加间距，请将<tr>设置为block元素，然后您可以使用margin属性。

在此处查看演示http://codepen.io/pen/10248/2

<强>编辑：

已更新，包含行之间的间距。

Answer 2

使用空行作为间距

参见下面的示例

 <table class="style1">
        <tr style="height: 20px;">
            <td>
                sfgefgfeg</td>
            <td>
                &sfgefgfeg;</td>
            <td>
                &sfgefgfeg;</td>
        </tr>
        <tr style="height: 5px;" >
            <td>
                &nbsp;</td>
            <td>
                &nbsp;</td>
            <td>
                &nbsp;</td>
        </tr>
        <tr style="height: 20px;">
            <td>
                &sfgefgfeg;</td>
            <td>
                &sfgefgfeg;</td>
            <td>
                &sfgefgfeg;</td>
        </tr>
        <tr style="height: 20px;">
            <td>
                &sfgefgfeg;</td>
            <td>
                &sfgefgfeg;</td>
            <td>
                &sfgefgfeg;</td>
        </tr>
    </table>

此处添加高度为5px的行以进行间距。

Answer 3

您可以在TD元素上使用border-top和border-bottom，并使边框的颜色与页面的背景颜色相同。

Answer 4

您可以通过添加border-bottom: 3px solid #fff来模拟间距（根据需要更改颜色，顶部相同）

Answer 5

在单元格之间创建间距的替代方法（如果单元格有边框，则边框之间出现间距）是在HTML中的cellspacing元素上使用table属性并使用{{ CSS中的1}}属性。前者患有问题中提到的不灵活性。后者限制浏览器支持。您可以使用两者，以便旧浏览器使用简单的HTML间距和较新的浏览器CSS方式。

以下示例设置0.5em的垂直间距（即行之间）和0.1em的较小水平间距（即列之间）。

border-spacing

（顺序偏离CSS属性值中的常规顺序：此处水平首先出现，然后是纵向，而例如在边距：0.1em 0.3m，相反的顺序适用。）

表特殊Cellspacing

5 个答案: