如何在表格中的行之间添加间隙？答案

【问题标题】：How do I add gap between rows in table?如何在表格中的行之间添加间隙？
【发布时间】：2018-02-19 15:09:14
【问题描述】：

我正在尝试像在linkedin 中一样创建一个“墙”，我正在通过创建一个长表来做到这一点。我更改了背景颜色和表格颜色以提供对比。我的问题是我无法分隔表格行，以便在它们之间显示背景颜色。

我找到的所有示例都使用

<table style="border-collapse: separate;border-spacing:0 1rem;">

如何在间距中着色以匹配背景？

或者有没有更好的方法来解决这个问题？

【问题讨论】：

How to fill color in border spacing between cells in HTML using CSS的可能重复
尝试对table而不是tds应用颜色，并通过tr {margin-bottom: 10px}添加行间距

标签： html css

【解决方案1】：

你不能完全按照你想要的方式去做。您的选择是：

为所需行中的每个单元格添加填充：tr.this-one td { padding-bottom: 1em;}。这将使用单元格的背景颜色。
为所需行中的每个单元格添加粗边框：tr.this-one td { border-bottom: 1em solid red;}。这将使用您设置的边框颜色，您可以使其与您拥有的背景颜色相匹配。
在标记中添加一行：<tr><td colspan="10"></td></tr> 并按您喜欢的方式设置样式。您还可以在表格中使用 <thead>/<tfoot>/multiple <tbody> elements 作为对行进行语义分组的一种方式（但它们本身不能设置样式）。

【讨论】：

【解决方案2】：

嗨

也许这会有所帮助。我将表格放入 div 容器中并将其设置为背景。然后，如果您需要在行之间使用另一种颜色，只需更改表的background-color 属性，因为现在transparent 应该与容器背景相同。

table {
    border-collapse: separate;
    border-spacing: 0rem 1rem;
    background-color: transparent;
    border: 1px solid yellow;
}

tr {
    background-color: tomato;
}

td {
    padding: 5px;
}

.container {
    display: flex;
    justify-content: center;
    background-color: royalblue;
}

<div class="container">
  <table>
    <tr>
      <td>mallard</td>
      <td>colorful</td>
    </tr>
    <tr>
      <td>dog</td>
      <td>piebald</td>
    </tr>
    <tr>
      <td>fox</td>
      <td>foxy</td>
    </tr>
  </table>
</div>

干杯

【讨论】：