Question

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

我的问题是，在单元格上使用border-radius时，单元格不尊重background-color的{{1}}。也就是说，边框半径会切出默认背景颜色（在本例中为白色）的角落，而不是下面的tbody颜色（在本例中为绿色）。

更新：此问题出现在Chrome / Safari中，但不出现在Firefox中（仅在所有3上测试过我自己）。仍在寻找Chrome上的解决方法（FOUND！见接受的答案）。

＆＃13;

tbody

＆＃13;

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

＆＃13;

要清楚，我正在寻找的修补程序会更改结果示例，因此它看起来像这样（我只是将<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）：

＆＃13;

table

＆＃13;

tr:first-child td:first-child {
  background-color: red;
  border-radius: 25px;
}

table {
  border-spacing: 0px;
}

table { /* changed this line */
  background-color: green;
}

＆＃13;

我不想这样做，因为我希望背景颜色位于<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上。< / p>

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

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

Answer 2

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

在Chrome上，display: table解决了这个问题。但是，它会导致表的其他布局问题，它似乎不考虑宽度。使用tbody { background-color: green; display: table; }似乎可以解决这两个问题：

y++

Answer 3

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

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

3 个答案: