如何在表格行上添加边距

Question

我想在表格的行之间添加空间，如下图所示：

如果可能，请向我展示您的代码。

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

Answer 1

您可以使用 border-spacing 。这是一个简单的例子。

 table, th, td {
  background: #ffffff;
  padding: 5px;
}
table {
  background: #999999;
  border-spacing: 15px;
}

 <h2>Border Spacing</h2>
<p>Border spacing specifies the space between the cells.</p>

<table style="width:100%">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>
    <td>80</td>
  </tr>
</table>

<p>Try to change the border-spacing to 5px.</p>

https://www.w3schools.com/html/html_tables.asp

https://www.w3schools.com/html/tryit.asp?filename=tryhtml_table_cellspacing

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

Answer 2

border-spacing 属性将适用于这种特殊情况。

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

https://developer.mozilla.org/en-US/docs/Web/CSS/border-spacing

或者你可以使用 hacky 方法。这给出了表行之间的边距 i

 tr{
    border: 5px solid white;
}

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