Por que não `tbody` define a cor de fundo em uma tabela? - javascript, html, css

estou usando <tbody> como um seletor de CSS para definir o background-color em uma mesa. Estou fazendo isso porque tenho vários <tbody> seções dentro da tabela, e eles têm cores de fundo diferentes.

Meu problema é que ao usar border-radius nas células, a célula não respeita o background-color do tbody. Ou seja, o raio da borda corta os cantos na cor de fundo padrão (neste caso, branco), não na cor do corpo (neste caso, verde), abaixo.

ATUALIZAÇÃO: Este problema ocorre no Chrome / Safari, mas não no Firefox (apenas testei em todos os 3). Ainda estou procurando uma solução alternativa no Chrome (ENCONTRADO! Veja a resposta aceita).

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>

Para ficar claro, a correção que estou procurando mudaria o exemplo resultante para que se pareça com isto (estou apenas mudando o table tbody seletor para table só):

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>

Não quero fazer assim, porque quero que a cor de fundo esteja no tbody (que tenho vários) NÃO no todo table.

Há alguma maneira de mostrar a cor do corpo?

Respostas:

Tente fazer o <tbody> para renderizar como um elemento de bloco.

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>

Uma resposta atualizada para outros usuários, se ajudar.

No Chrome, o display: block corrige o problema. No entanto, isso causa outros problemas de layout com a mesa, onde parece não respeitar as larguras. Usando display: table em vez disso, parece resolver os dois problemas:

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

Defina o espaçamento entre células como 0 e as bordas da tabela comonenhum e reduza as bordas da tabela (para garantir que não haja espaço ao redor das caixas coloridas). Em seguida, aplique a cor de fundo aos elementos TD em vez do elemento tbody.