CSS将底边距添加到具有边框背景颜色的<tr>

Question

我要的是我得到的这张桌子上的每一行都有带圆角边框的背景色。我遇到的问题是，由于表格已折叠，我需要在页面底部添加边距。所以表格看起来像这样

<table>
 <tr>
   <td>stuff</td>
   <td>stuff2</td>
   <td>stuff3</td>
 </tr>
</table>

然后有很多这样的行，对于每一行，我都希望有一个带有圆角边框的特定背景，到目前为止，我已经做到了。使用

.colored-row td:first-child {
    border-top-left-radius: 1px;
}

.colored-row td:last-child {
    border-top-right-radius: 1px;
}

.colored-row td:first-child {
    border-bottom-left-radius: 1px;
}

.colored-row td:last-child {
    border-bottom-right-radius: 1px;
}

.colored-row {
    background: #374F60;
}

此后出现问题，因为我也希望在每行之间都有一个边距，并且我尝试通过在内部添加边距来进行处理，因为这没有什么区别，但是在颜色上只是随着边距不断扩大，如果我把颜色也会在应用颜色的地方之间留出一些空间。

所以我希望它在整个行中都有这样的边距。有什么办法吗？

Answer 1

您不能将margins添加到tr元素中。唯一可行的方法是在display:block上使用tr。但这会导致tr的宽度根据其内容而不是表格的宽度。

一种解决方法是（如果可以编辑HTML的话）在彩色行之间添加separator行，并为其指定高度。

.colored-row td:first-child {
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
}

.colored-row td:last-child {
  border-bottom-right-radius: 5px;
  border-top-right-radius: 5px;
}

.colored-row {
  background: #374F60;
}

.separator {
  height: 10px;
}

table {
  border-collapse: collapse;
  width:100%;
}

<table>
  <tr class="colored-row">
    <td>stuff</td>
    <td>stuff2</td>
    <td>stuff3</td>
  </tr>
  <tr class="separator"></tr>
  <tr class="colored-row">
    <td>stuff</td>
    <td>stuff2</td>
    <td>stuff3</td>
  </tr>
</table>

编辑：或者，您可以使用border-spacing，但仅在border-collapse设置为separate时有效。但这也会在第一行中添加一个“顶部空间”

.colored-row td:first-child {
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
}

.colored-row td:last-child {
  border-bottom-right-radius: 5px;
  border-top-right-radius: 5px;
}

.colored-row {
  background: #374F60;
}

table {
  border-collapse: separate;
  border-spacing: 0 15px;
    width:100%;
}

<table>
  <tr class="colored-row">
    <td>stuff</td>
    <td>stuff2</td>
    <td>stuff3</td>
  </tr>
  <tr class="colored-row">
    <td>stuff</td>
    <td>stuff2</td>
    <td>stuff3</td>
  </tr>
</table>