为什么`tbody`不在表格中设置背景颜色？

Question

我<tbody>用作 CSS 选择器来设置background-color表中的 。我这样做是因为我<tbody>在表格中有多个部分，并且它们具有不同的背景颜色。

我的问题是，当使用border-radius的细胞，细胞不尊重background-color的tbody。也就是说，边框半径以默认背景颜色（在这种情况下为白色）而不是下面的 tbody 颜色（在这种情况下为绿色）切出角。

更新：此问题发生在 Chrome/Safari 中，但不在 Firefox 中（仅在所有 3 个上进行了测试）。仍在寻找 Chrome 上的解决方法（找到了！请参阅已接受的答案）。

tr:first-child td:first-child {
  background-color: red;
  border-radius: 25px;
}

table {
  border-spacing: 0px;
}

table tbody {
  background-color: green;
}

<table>
  <tbody>
    <tr>
      <td><p>TOP LEFT</p></td>
      <td><p>TOP RIGHT</p></td>
    </tr>
    <tr>
      <td><p>BOT LEFT</p></td>
      <td><p>BOT RIGHT</p></td>
    </tr>
  </tbody>
</table>

需要明确的是，我正在寻找的修复程序会更改结果示例，因此它看起来像这样（我只是将table tbody选择器更改为tableonly）：

tr:first-child td:first-child {
  background-color: red;
  border-radius: 25px;
}

table {
  border-spacing: 0px;
}

table { /* changed this line */
  background-color: green;
}

<table>
  <tbody>
    <tr>
      <td><p>TOP LEFT</p></td>
      <td><p>TOP RIGHT</p></td>
    </tr>
    <tr>
      <td><p>BOT LEFT</p></td>
      <td><p>BOT RIGHT</p></td>
    </tr>
  </tbody>
</table>

我不想那样做，因为我希望背景颜色在tbody（我有多个）上而不是在整个table.

有什么办法可以让 tbody 颜色显示出来？

Answer 1

尝试使<tbody>to 像块元素一样呈现。

tbody {
  background-color: green;
  display: block;
}

tbody {
  background-color: green;
  display: block;
}

tr:first-child td:first-child {
  background-color: red;
  border-radius: 25px;
}
table {
  border-spacing: 0px;
}
tbody {
  background-color: green;
  display: block;
}