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

Question

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

[===ROW===]
[===ROW===]
[===ROW===]
[===ROW===]

......更像这样:

[===ROW===]

[===ROW===]

[===ROW===]

[===ROW===]

我尝试添加

margin-bottom:1em;

对于td和tr都没有得到任何东西.有任何想法吗？

Answer 1

一切你需要的:

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

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

人们给出的一些答案涉及边界崩溃:崩溃,其效果与问题所要求的完全相反,这有点奇怪.

Answer 2

table {
    border-collapse: collapse;
}

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

除非先设置边框折叠,否则单元格不会对任何内容做出反应.一旦设置了TR元素,您也可以为TR元素添加边框(以及其他内容.)

如果这是用于布局,我将转向使用DIV和更多最新的布局技术,但如果这是表格数据,请自行解决.我仍然在我的Web应用程序中大量使用表来获取数据.

Answer 3

只需在元素上使用padding-topand即可。padding-bottomtd

单位可以是此列表中的任何内容：

演示代码：

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

<table>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
  </tr>
  <tr>
    <td>Peter</td>
    <td>Griffin</td>
  </tr>
  <tr>
    <td>Lois</td>
    <td>Griffin</td>
  </tr>
</table>

Answer 4

如果您没有边框，或者有边框并希望单元格内有间距，则可以使用padding, 或line-height。据我所知，边距对单元格和行没有影响。
用于单元格间距的 CSS 属性是border-spacing，但它不适用于 IE6/7（因此您可以根据人群使用它）。

如果所有其他方法都失败了，您可以cellspacing在标记中使用旧属性 - 但这也会为您提供列之间的间距。一些CSS 重置建议您无论如何都应该设置它以获得跨浏览器支持：

/* 表中仍然需要cellspacing="0"标记 */

Answer 5

如果没有其他答案令人满意，则始终可以创建一个空行，并使用CSS对其进行适当样式设置以使其透明。