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

Question

我想要的是我得到这个 table ，其中每一行都有带圆角边框的背景颜色。我遇到的问题是我需要在 table 上添加边距底部。所以 table 看起来像这样

<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;
}

此后出现问题，因为我也想在每一行之间留出边距，我尝试在其中添加边距 a，因为它没有任何区别，但颜色只是随着边距不断扩大，如果我将颜色放在上面，它也会在未应用颜色的位置之间留出一些空间。

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

Answer 1

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

的宽度

一个解决方案是（如果您可以编辑 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 时有效。但这也会在第一行添加一个 'space at the top'

.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>

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

CSS Adding margin bottom to <tr> that has a background color with borders

html

css

html-table

margin