用 CSS 加边框的表格行和间距？答案

【问题标题】：Bordered table rows and spacing with CSS?用 CSS 加边框的表格行和间距？
【发布时间】：2014-04-19 07:05:36
【问题描述】：

我有一个表格，我需要在给定的一行或多行周围加上一个边框，它们之间有间距。

我似乎可以做一个或另一个。

我知道我可以使用

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

为了获得我的间距，但边框不会显示为类似

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

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

我错过了什么吗？

编辑：JS FIDDLE here

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

如果你使用“分离”，你会得到间距但没有边框。

【问题讨论】：

对于这样的事情有一个 jsfiddle 可能会有所帮助。
或者添加你想要的结果的绘图。我不清楚您是否希望出现边框和间距。
添加了一个小提琴。我需要行和列之间的间距，但我还需要指定的行有边框。
您是否尝试过在表格单元格上使用填充？喜欢td { padding: .5em; }
这就是你想要的：jsfiddle.net/6rLsL/1/show（见下面我的回答）

标签： html css html-table

【解决方案1】：

此处重复问题：Style row or column rather than cells when border-collapse: separate

建议使用colspan模拟一个表格行，在colspan里面给表格添加边框。

【讨论】：

colspan 似乎完全是矫枉过正。你可以在没有额外的 colspan 或其他的情况下做到这一点。 jsfiddle.net/6rLsL/1
适用于背景色，我可能最终会使用它，但不能使用边框。见jsfiddle.net/6rLsL/2
@seanna 是的，我想到了一个嵌套表，但我会有很多行，然后让所有列对齐变得很棘手。首先使用表格的想法是让我可以对齐表格数据。

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

你可以有一个带边框的内表：

<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/

【讨论】：

【解决方案4】：

如果您想要表格行之间的间距并为每行添加边框样式，您可以通过仅设置顶部和底部边框间距来实现此目的，否则您无法为每个表格行设置连续的线条。而且你需要在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;
}

【讨论】：

【解决方案5】：

你可以尝试画一个不模糊的阴影：DEMO

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

:( 这在 FF 中有效，但是 ...

所以，我们可以使用:first-child和:last-child从tds绘制边框，

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;
}

【讨论】：