Dlaczego `tbody` nie ustawia koloru tła w tabeli? - javascript, html, css

ja używam <tbody> jako selektor CSS, aby ustawić background-color w tabeli. Robię to, ponieważ mam wiele <tbody> sekcje w tabeli i mają różne kolory tła.

Mam problem z używaniem border-radius na komórkach komórka nie szanuje background-color z tbody. Oznacza to, że promień granicy wycina narożniki w domyślnym kolorze tła (w tym przypadku białym), a nie w kolorze (w tym przypadku zielony), poniżej.

AKTUALIZACJA: Ten problem występuje w Chrome / Safari, ale nie w Firefoksie (właśnie testowałem się na wszystkich 3). Nadal szukasz obejścia problemu w Chrome (ZNALEŹ! Patrz zaakceptowana odpowiedź).

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>

Żeby było jasne, poprawka, której szukam, zmieniłaby wynikowy przykład, aby wyglądał tak (zmieniam tylko table tbody selektor do table tylko):

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>

Nie chcę tego robić w ten sposób, ponieważ chcę, aby kolor tła był na tbody (które mam wiele) NIE w całości table.

Jakikolwiek sposób, aby pokazać kolor w kolorze?

Odpowiedzi:

Spróbuj zrobić <tbody> renderować jak element bloku.

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>

Zaktualizowana odpowiedź dla innych użytkowników, jeśli to pomoże.

W Chrome, the display: block rozwiązuje problem. Powoduje to jednak inne problemy z układem w tabeli, gdzie wydaje się, że nie uwzględnia szerokości. Za pomocą display: table zamiast tego wydaje się rozwiązywać oba problemy:

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

Ustaw odstęp między komórkami na 0, obramowanie na tabelibrak i zwiń granice tabeli (aby upewnić się, że wokół kolorowych pól nie ma miejsca) Następnie zastosuj kolor tła do elementów TD zamiast elementu tbody.