如何在每行和每列的表格单元格背景颜色中交替答案

【问题标题】：How to alternate in a table cell background color in each row and column如何在每行和每列的表格单元格背景颜色中交替
【发布时间】：2016-12-28 19:40:01
【问题描述】：

我想格式化一个 CSS，如图所示：奇数行的第一列单元格和偶数行的第二列单元格应该被格式化为不同的背景颜色。

我知道如何像这样交替整行或整列

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

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

【问题讨论】：

显示你目前尝试过的代码。
重新编辑了我的帖子

标签： css

【解决方案1】：

您可以使用odd 和even CSS 伪名称。

这样，您的<table> 将拥有多少<tr> 或<td> 并不重要。

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>

【讨论】：

【解决方案2】：

您可以将nth-child 选择器与first/last child 组合使用以获得所需的结果。因此，您可以选择所有 tr 和 2n + 1 或奇数行并选择第一个 td 然后选择 tr 和 2n + 2 或偶数行并选择最后一个 td

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

tr:nth-child(2n + 1) td:first-child,
tr:nth-child(2n + 2) td:last-child {
  background: #EA9999;
}

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

【讨论】：

【解决方案3】：

您可以使用以下规则：

tr {
    &:nth-child(odd) {
        >td {
            &:nth-child(odd) {
                background-color: red;
            }
            &:nth-child(even) {
                background-color: white;
            }
        }
    }
    &:nth-child(even) {
        >td {
            &:nth-child(odd) {
                background-color: white;
            }
            &:nth-child(even) {
                background-color: red;
            }
        }
    }
}

【讨论】：

【解决方案4】：

这里是解决这个问题的方法



table{ width:100%}
    td {
      padding: 20px;
      border: 1px solid black;
    }

    tr:nth-child(2n + 1) td:first-child,
    tr:nth-child(2n + 2) td:last-child {
      background: #EA9999;
    }
    <table>
      <tr>
        <td></td>
        <td></td>
      </tr>
      <tr>
        <td></td>
        <td></td>
      </tr>
      <tr>
        <td></td>
        <td></td>
      </tr>
      <tr>
        <td></td>
        <td></td>
      </tr>
    </table>

【讨论】：