在 css 或 javascript 中为表格行和列设置替代颜色

Question

我也尝试过使用以下代码。它不适用于这种情况。

table>tbody>tr>td:nth-child(odd){
    background-color: #F2F2F2;
}
table>tbody>tr:nth-child(odd){
    background-color: #FFF !important;
}
table>tbody>tr>td:nth-child(even){
    background-color: #F7F7F7;
}

Answer 1

交替行

看看区别：我们在tr上使用odd和even，而不是td：

table>tbody>tr:nth-child(odd) >td{
    background-color: #eee;
}
table>tbody>tr:nth-child(even)>td{
    background-color: #ccc;
}

<table>
  <tbody>
    <tr><td>. . . . .</td><td>. . . . .</td><td>. . . . .</td></tr>
    <tr><td>. . . . .</td><td>. . . . .</td><td>. . . . .</td></tr>
    <tr><td>. . . . .</td><td>. . . . .</td><td>. . . . .</td></tr> 
    <tr><td>. . . . .</td><td>. . . . .</td><td>. . . . .</td></tr>
    <tr><td>. . . . .</td><td>. . . . .</td><td>. . . . .</td></tr>
  </tbody>
</table>

似乎第一部分在这里得到了回答：
Alternate table row color using CSS?

交替行和列：

如果您想要“加倍”替代，请将概念扩展到所有组合：

table>tbody>tr:nth-child(odd)> td:nth-child(odd) {background-color:#aaa}
table>tbody>tr:nth-child(odd)> td:nth-child(even){background-color:#888}
table>tbody>tr:nth-child(even)>td:nth-child(odd) {background-color:#eee}
table>tbody>tr:nth-child(even)>td:nth-child(even){background-color:#ddd}

<table>
  <tbody>
    <tr><td>. . . . .</td><td>. . . . .</td><td>. . . . .</td></tr>
    <tr><td>. . . . .</td><td>. . . . .</td><td>. . . . .</td></tr>
    <tr><td>. . . . .</td><td>. . . . .</td><td>. . . . .</td></tr> 
    <tr><td>. . . . .</td><td>. . . . .</td><td>. . . . .</td></tr>
    <tr><td>. . . . .</td><td>. . . . .</td><td>. . . . .</td></tr>
  </tbody>
</table>

Answer 2

您的列css 已覆盖行css。因此，将它们分别更改为 odd 和 even 行，如下所示。

table>tbody>tr:nth-child(odd){
    background-color: #F7F7F7 !important;
}

table>tbody>tr:nth-child(even){
    background-color: #FFF !important;
}

table>tbody>tr:nth-child(odd)>td:nth-child(odd){
    background-color: #F2F2F2 !important;
}
table>tbody>tr:nth-child(odd)>td:nth-child(even){
    background-color: #F7F7F7;
}

table>tbody>tr:nth-child(even)>td:nth-child(odd){
    background-color: #FFF !important;
}
table>tbody>tr:nth-child(even)>td:nth-child(even){
    background-color: #F2F2F2;
}

<table>
  <tbody>
    <tr>
      <td>Row 1 Column 1</td>
      <td>Row 1 Column 2</td>
      <td>Row 1 Column 3</td>
    </tr>
    <tr>
      <td>Row 2 Column 1</td>
      <td>Row 2 Column 2</td>
      <td>Row 2 Column 3</td>
    </tr>
    <tr>
      <td>Row 3 Column 1</td>
      <td>Row 3 Column 2</td>
      <td>Row 3 Column 3</td>
    </tr>
    <tr>
      <td>Row 4 Column 1</td>
      <td>Row 4 Column 2</td>
      <td>Row 4 Column 3</td>
    </tr>
  </tbody>
</table>