html - 带有 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;
}

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