如何在每行和每列中替换表格单元格背景颜色

Question

我想格式化CSS,如图所示:在奇数行中,第一列单元格和偶数行中第二列单元格应使用不同的背景颜色进行格式化.

我知道如何替换整行或列

tr {
border-top: 0px solid $input-border-col;
&:first-child {
    border-top: none;
}
&:nth-child(even) {background: #CCC;}
}

但是还没有找到如何在每一行中交替的方法

Answer 1

您可以使用odd和evenCSS伪名称.

像这样,没有多少<tr>或<td>你的<table>意志无关紧要.

td {
  padding: 20px;
  border: 1px solid black;
}

table tr:nth-child(odd) td:nth-child(odd),
table tr:nth-child(even) td:nth-child(even) {
    background: orange;
}

<table>
  <tr>
    <td>x</td>
    <td>x</td>
    <td>x</td>
    <td>x</td>
  </tr>
  <tr>
    <td>x</td>
    <td>x</td>
    <td>x</td>
    <td>x</td>
  </tr>
  <tr>
    <td>x</td>
    <td>x</td>
    <td>x</td>
    <td>x</td>
  </tr>
  <tr>
    <td>x</td>
    <td>x</td>
    <td>x</td>
    <td>x</td>
  </tr>
</table>