如何用CSS为表格添加横向隔行变色？解决:nth-child作用错误

你的问题根源有两个：

• CSS选择器写法错误，导致样式作用到了单元格（列）而非行
• 给tr设置display: flex破坏了表格原生行结构，让行的nth-child选择器无法正常识别

修正步骤 #

1. 移除行的flex布局
   删除tr { display: flex; justify-content: center; }这行代码，恢复表格原生的行结构，这样行的奇偶选择才能正常生效。

2. 修正隔行变色选择器
   把原来作用于单元格的选择器，改成直接选中行的写法：

   /* 原错误写法（空格表示选中tr的子元素） */
   /* tbody tr :nth-child(odd) { ... } */
   
   /* 修正后写法（直接选中tbody下的奇数行tr） */
   tbody tr:nth-child(odd) {
     background-color: #222831;
   }
   
   tbody tr:nth-child(even) {
     background-color: #31363F;
   }
   

   核心是去掉tr和:nth-child之间的空格，没有空格的选择器才会直接定位到tr本身。

3. 优化列宽稳定性（可选）
   给table添加table-layout: fixed，配合th和td的width: 16.7%，能让列宽保持均匀：

   table {
     border: 2px solid black;
     border-collapse: collapse;
     overflow: auto;
     table-layout: fixed; /* 新增 */
   }
   

修改后的完整代码 #

CSS代码

table,
thead,
tbody {
  width: 100%;
}

table {
  border: 2px solid black;
  border-collapse: collapse;
  overflow: auto;
  table-layout: fixed;
}

th {
  background-color: darkgray;
  width: 16.7%;
  text-align: center;
  border: 1px solid black;
  padding: 5px;
}

td {
  width: 16.7%;
  text-align: center;
  border: 1px solid black;
  padding: 5px;
  color: white; /* 可选：让深色背景上的文字更清晰 */
}

tbody tr:nth-child(odd) {
  background-color: #222831;
}

tbody tr:nth-child(even) {
  background-color: #31363F;
}

HTML代码（无需修改）

<table>
  <thead>
    <tr>
      <th>S.no</th>
      <th>Visiter name</th>
      <th>Patient name</th>
      <th>reason</th>
      <th>enter time</th>
      <th>leave time</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Guy 1</td>
      <td>Guy 2</td>
      <td>example</td>
      <td>12: 00am</td>
      <td>1: 30pm</td>
    </tr>
    <tr>
      <td>1</td>
      <td>Guy 1</td>
      <td>Guy 2</td>
      <td>example</td>
      <td>12: 00am</td>
      <td>1: 30pm</td>
    </tr>
  </tbody>
</table>

修改完成后，就能实现tbody内奇数行、偶数行分别显示不同底色的隔行变色效果。

内容的提问来源于stack exchange，提问作者Navneeth R