CSS：如何在表格中的行之间创建间隙？

Question

意味着使结果表看起来不像这样：

[===行===]
[===行===]
[===行===]
[===行===]

……还有更多这样的：

[===行===]

[===行===]

[===行===]

[===行===]

我尝试添加

margin-bottom:1em;

到 td 和 tr 但一无所获。有任何想法吗？

原文由 MGOwen 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

一切你需要的：

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

假设您想要一个 1em 垂直间隙，并且没有水平间隙。如果你这样做，你可能还应该考虑控制你的行高。

人们给出的一些答案涉及 border-collapse: collapse ，其效果与问题所要求的完全相反。

原文由 John Haugeland 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

table {
    border-collapse: collapse;
}

td {
    padding-top: .5em;
    padding-bottom: .5em;
}

除非你先设置 border-collapse，否则细胞不会对任何事情做出反应。一旦设置好（除其他事项外），您还可以向 TR 元素添加边框。

如果这是为了布局，我会转而使用 DIV 和更多最新的布局技术，但如果这是表格数据，那就别想了。我仍然在我的 Web 应用程序中大量使用表格来获取数据。

原文由 Ryan Florence 发布，翻译遵循 CC BY-SA 2.5 许可协议