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

【问题标题】：Why doesn't `tbody` set the background color in a table?为什么 `tbody` 不在表格中设置背景颜色？
【发布时间】：2016-01-15 18:42:02
【问题描述】：

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

我的问题是，在单元格上使用border-radius 时，单元格不尊重tbody 的background-color。也就是说，边框半径以默认背景颜色（在本例中为白色）而不是 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 选择器更改为 table 而已）：

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。

有什么方法可以让身体颜色透出来？

【问题讨论】：

说实话，我不清楚预期的结果是什么。解释当前 sn-p 和你想要的之间的区别
我使用的是 Firefox，第一个示例对我来说可以正常工作。颜色在 tbody 标签上，我可以看到。您是否在页面上正确加载了样式？
如果你运行两个代码sn-ps，输出是不同的——即第一个在红色单元格的半径处显示一个白色边框，第二个例子显示一个绿色边框。
我在 Mac OSX 上使用 Chrome
不使用 tbody 设置背景，而是给 tr 分配一个类不是更有效吗？

标签： javascript html css

【解决方案1】：

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

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

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

【讨论】：

我想应该是这个chromium bug。

【解决方案2】：

对其他用户的更新答案，如果有帮助的话。

在 Chrome 上，display: block 解决了这个问题。但是，它会导致表格的其他布局问题，它似乎不尊重宽度。改用display: table 似乎可以解决这两个问题：

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

【讨论】：

【解决方案3】：

将单元格间距设置为 0，将表格边框设置为无，并折叠表格边框（以确保彩色框周围没有空间）。然后将背景颜色应用到 TD 元素而不是 tbody 元素。

【讨论】：