Why does tbody not set the background color in the table?

Question

I use <tbody>as CSS selector to set background-colorin the table. I do this because I have several partitions <tbody>in the table and they have different background colors.

My problem is that when used border-radiusin cells, the cell does not count background-color tbody. That is, the border radius cuts out the corners of the default background color (in this case, white), and not the theta color (in this case, green) below.

UPDATE: this problem occurs in Chrome / Safari, but not in Firefox (just tested itself on all 3). Still looking for a Chrome workaround (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>

Run codeHide result

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

Hide result

, , tbody ( ) table.

?

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>

Hide result

Answer 2

, .

Chrome display: block . , , , , . display: table , , :

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

Answer 3

Sets the cells to 0, borders the table to none and collapses the borders of the table (to make sure there is no space around the colored fields). Then apply the background color to the TD elements instead of the tbody element.