Html 带边框的表格行和间距与CSS？

我有一个表格，我需要在给定的一行或几行之间放置一个边框

我似乎能做到这一点或那一点

我知道我可以用

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

以获得我的间距，但是边界不会显示为

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

如果我设置了

边框折叠：折叠

，则显示蓝色边框。但是没有间隔

我是不是遗漏了什么

编辑：

您可以看到，如果使用“塌陷”，边界可以工作，但没有空间

---

如果您使用“separate”，您将获得间距，但没有边框。

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

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

---

您可以尝试绘制一个无诱惑的阴影：

：（这在FF中有效，但是

---

所以， 我们可以使用

:first child

和

:last child

从

td

s绘制边界

---

重复问题：

---

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

您可以拥有一个带有边框的内部表格：

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

福
酒吧
巴兹
洛勒姆
乱数假文
多洛

---

演示：

如果需要表格行之间的间距并为每行添加边框样式，您可以通过仅设置顶部和底部边框间距来实现这一点，否则无法为每个表格行设置连续行。并且您需要在td上设置边框样式。因为边框折叠：折叠可防止对边框进行样式设置r，但您需要它来设置行之间的顶部和底部间距。

---

对于这种情况，使用JSFIDLE可能会有所帮助。或者添加所需结果的绘图。我不清楚您是否希望显示边框和间距。添加了FIDLE。我需要行和列之间的间距，但我还需要指定的行具有边框。您是否尝试过在表单元格上使用填充？例如

td{padding:.5em；}

这就是您想要的：（请参阅下面的答案）colspan似乎完全是过火了。你可以不用额外的colspan或其他颜色就可以做到这一点。这与背景色有关，我可能最终会使用背景色，但不会使用边框。请看@seanna是的，我想到了一个嵌套表，但我会有很多行，然后很难让所有列对齐。首先使用表的想法是这样我就可以表格数据。

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

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

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

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