Question

我有下表，我想让它看起来像棋盘。我该怎么做？我和n-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

您需要替换行AND单元格。尝试：

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>

Answer 2

一种简单的方法是：

tr:nth-of-type(odd) td:nth-of-type(odd){
    background-color: tomato;
}

tr:nth-of-type(even) td:nth-of-type(even){
    background-color: tomato;
}

实施例： https://jsfiddle.net/2nxdvezq/

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

2 个答案: