使用 CSS 的表格的棋盘样式。如何？

Question

我有下表，我想让它看起来像棋盘。我该怎么做？我尝试了 nth-child，但无法解决。感谢您的任何帮助！

<table class="chess">
        <tr>
            <td> </td>
            <td>Brasov</td>
            <td>Zarnesti</td>       
        </tr>

        <tr>
            <td> R14701 </td>
            <td> 06:06 </td>
            <td> 06:57 </td>
        </tr>

        <tr>
            <td> R14705 </td>
            <td> 08:10 </td>
            <td> 08:59 </td>
        </tr>

        <tr>
            <td> R14709 </td>
            <td> 12:10 </td>
            <td> 12:59 </td>
        </tr>

        <tr>
            <td> R14713 </td>
            <td> 14:10 </td>
            <td> 14:59 </td>
        </tr>
    </table>

我尝试了这个，但出了点问题

td:nth-child(even) {
    background: grey;
}

td:nth-child(odd){
    background: white;
}

tr:nth-child(even){
    background:white;
}

tr:nth-child(odd){
        background: grey;
}

Answer 1

您需要交替行和单元格。尝试：

tr:nth-child(even) td:nth-child(even), tr:nth-child(odd) td:nth-child(odd) {
  background: grey;
}
tr:nth-child(odd) td:nth-child(even), tr:nth-child(even) td:nth-child(odd) {
  background: white;
}

tr:nth-child(even) td:nth-child(even), tr:nth-child(odd) td:nth-child(odd) {
  background: grey;
}
tr:nth-child(odd) td:nth-child(even), tr:nth-child(even) td:nth-child(odd) {
  background: white;
}

tr:nth-child(even) td:nth-child(even), tr:nth-child(odd) td:nth-child(odd) {
  background: grey;
}
tr:nth-child(odd) td:nth-child(even), tr:nth-child(even) td:nth-child(odd) {
  background: white;
}