我在用<tbody>作为 CSS 选择器来设置background-color在一个表中。我这样做是因为我有多个<tbody>表内的部分，它们具有不同的背景颜色。
我的问题是，当使用border-radius在细胞上，细胞不尊重background-color of the 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 only):
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>像块元素一样渲染。
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>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
