为什么'tbody'不设置表格的背景色?-Whydoesn't`tbody`setthebackgroundcolorinatable?

I am using as a CSS selector to set the background-color in a table. I'm doing this because I have multiple sections within the table, and they have different background colors.

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

My issue is that when using border-radius on the cells, the cell doesn't respect the background-color of the tbody. That is, the border radius cuts out the corners in the default background color (in this case white), not the tbody color (in this case, green), below.

我的问题是，当在细胞上使用边界半径时，细胞不考虑tbody的背景颜色。也就是说，边界半径在默认背景颜色(在本例中为白色)中裁剪出角落，而不是tbody颜色(在本例中为绿色)，如下所示。

UPDATE: This problem occurs in Chrome/Safari, but not in Firefox (just tested myself on all 3). Still looking for a workaround on Chrome (FOUND! See accepted answer).

更新:这个问题出现在Chrome/Safari浏览器中，但在Firefox中没有出现(只是在所有3个浏览器中测试了我自己)。见接受答案)。

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

table {
  border-spacing: 0px;
}

table tbody {
  background-color: green;
}

  

    

      
TOP LEFT
      
TOP RIGHT
    
    

      
BOT LEFT
      
BOT RIGHT
    
  

To be clear, the fix I'm looking for would change the resultant example so it looks like this (I'm just changing the table tbody selector to table only):

明确地说，我正在寻找的修复将会改变结果示例，使其看起来像这样(我只是将表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;
}

  

    

      
TOP LEFT
      
TOP RIGHT
    
    

      
BOT LEFT
      
BOT RIGHT
    
  

I don't want to do it that way, because I want the background-color to be on the tbody (which I have multiple ones) NOT on the whole table.

我不想这样做，因为我想让背景颜色在tbody(我有多个)不在整个表上。

Any way to make the tbody color show through?

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

3 个解决方案

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

  

    

      
TOP LEFT
      
TOP RIGHT
    
    

      
BOT LEFT
      
BOT RIGHT
    
  

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