为什么"tbody"没有在表格中设置背景颜色? [英] Why doesn't `tbody` set the background color in a table?

问题描述

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

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

我的问题是，在单元格上使用 border-radius 时，单元格不尊重 tbody 的 background-color .也就是说，边框半径在下面使用默认的背景色(在这种情况下为白色)而不是在主体颜色(在这种情况下为绿色)中切掉了角.

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.

更新:此问题在Chrome/Safari中发生，但在Firefox中没有发生(仅在全部3种设备上进行了自我测试).仍在Chrome上寻找解决方法(查找已找到答案的答案).

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

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 仅):

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

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

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.

有什么方法可以显示出发色?

Any way to make the tbody color show through?

推荐答案

尝试使< 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>

这篇关于为什么"tbody"没有在表格中设置背景颜色?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！