表格隔行着色异常求助：横向而非纵向隔行高亮

算力阿峰

2026-8-16

表格隔行变色失效，变成隔列高亮的排查与解决

问题原因

你的CSS选择器存在语法逻辑错误：

.customer_table tr :nth-of-type(even) {
  background-color: #dcc79e;
}

tr和:nth-of-type(even)之间的空格是核心问题——这个选择器的作用是选中<tr>下所有偶数位置的子元素（也就是<td>/<th>标签），所以最终呈现出隔列高亮的效果，而非你需要的纵向隔行变色。

修正方案

直接选中<tbody>内的偶数行<tr>即可，同时限定范围避免影响表头样式：

.customer_table tbody tr:nth-of-type(even) {
  background-color: #dcc79e;
}

完整修正后的CSS代码

.customer_table {
  border-collapse:collapse;
  margin-left:auto;
  margin-right:auto;
  margin-top: 50px;
  font-size: 18px;
}

.customer_table thead tr {
  background-color: #4cb59c;
  text-align: left;
}

.customer_table th,
.customer_table td {
  padding: 12px 15px;
}

.customer_table tbody tr {
  border: 0.5px solid #16a583;
}

/* 修正后的隔行变色选择器 */
.customer_table tbody tr:nth-of-type(even) {
  background-color: #dcc79e;
}