html - CSS 将边距底部添加到具有带边框背景颜色的

Question

我想要得到的是这张表，其中每一行都有带圆 Angular 边框的背景色。我遇到的问题是，我需要在 上添加边距底部，因为表格在上面塌陷了。所以表格看起来像这样

<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 <div>在<td>里面自从<tr>它没有什么区别，但在<td>上如果我把颜色放在 <td> 上，颜色就会随着边距不断扩大。它在 <td> 之间也有一些空间。没有应用颜色的地方。

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

Answer 1

您不能将边距 添加到tr 元素。唯一可行的方法是在 tr 上使用 display:block。但这会导致 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>