Question

我有一张桌子，其中我需要在给定的行周围放置边框，并在它们之间留有间距。

我似乎可以做其中一个。

我知道我可以使用

table { border-collapse: separate; border-spacing: 1em 0.5em; }

要获得我的间距，但边框不会出现类似

的内容

tr.bordered { border: 1px solid blue; }

如果我设置border-collapse: collapse，则显示蓝色边框。但是没有间距。

我在这里错过了什么吗？

编辑：JS FIDDLE here

你可以看到，如果使用“折叠”，边框可以工作，但没有空间。

如果使用“单独”，则会得到间距但没有边框。

Answer 1

这里有重复的问题：Style row or column rather than cells when border-collapse: separate

建议使用colspan来模拟表格行，并在colspan内部的表格中添加边框。

Answer 2

我想你想要的是在单元格的边界和数据之间放置空格？如果是这样，您可以在td中使用属性填充。例如：

td {
padding-left: 10px;
padding-right: 10px;
padding-bottom: 10px;
padding-top: 10px;
}

Answer 3

你可以尝试绘制一个不起眼的阴影： DEMO

.bordered {
    box-shadow:0 0 0 1px black;
}

:(这适用于FF，但是......

所以，我们可以使用:first-child和:last-child从td s，

绘制边框

<强> DEMO 2

.bordered td {
    border: 1px solid #000;
    border-left:none;
    border:right:none;
    padding:1em 0.5em;
    border-right:none;
}
.bordered td:first-child {
    border-left:1px solid #000
}
.bordered td:last-child {
    border-right:1px solid #000;
    border-left:none;
} 
table {
    border-spacing: 0;
}

Answer 4

你可以有一个边界的内部表：

<table>
    <tr><td colspan="3">

    <table  class="bordered">
        <tr>
            <td>foo</td>
            <td>bar</td>
            <td>baz</td>
        </tr>
    </table>

    </td></tr>
    <tr>
        <td>lorem</td>
        <td>ipsum</td>
        <td>dolor</td>
    </tr>
</table>

演示：http://jsfiddle.net/2nMcg/7/

Answer 5

如果要在表格行之间添加间距并为每行添加边框样式，则可以通过仅设置顶部和底部边距来实现此目的，否则您不能为每个表格行创建连续的行。你需要在td上设置边框样式。由于border-collapse：collapse会阻止在TR元素上设置边框样式，但是需要它来设置行之间的顶部和底部间距。
http://jsfiddle.net/6rLsL/1/
http://jsfiddle.net/6rLsL/1/show

table {
    border-collapse: separate;
    border-spacing: 0 0.5em;
}

td {
   padding: 0.5em;
   border-top: 1px solid #000;
}

边界表行和CSS间距？

5 个答案: