含rowspan的表格如何为奇数Sl. No.行设置背景色？

这确实是rowspan带来的典型坑——CSS的:nth-child()是基于DOM中的行元素计数，而rowspan（或者你这里的多行分组结构）会让视觉上的一个“条目”对应多个DOM行节点，直接用奇偶选择器会完全打乱预期效果。这里有两个实用的解决方案：

方案1：用JavaScript精准定位奇数编号的行组 #

如果不想修改现有HTML结构，可以通过JS识别带有奇数编号的条目，给对应的所有行添加背景色类：

示例代码 #

HTML（保留你的原有结构）

<table border="1">
  <thead>
    <tr>
      <th>Sl. No.</th>
      <th>File No.</th>
    </tr>
    <tr>
      <th colspan="2">Subject</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1.</td>
      <td>1/2/34-gr</td>
    </tr>
    <tr>
      <td colspan="2">美观表格</td>
    </tr>
    <tr>
      <td>2.</td>
      <td>1/2/34-gr</td>
    </tr>
    <tr>
      <td colspan="2">美观表格</td>
    </tr>
    <!-- 以此类推 -->
  </tbody>
</table>

JavaScript

// 定位所有非空的Sl. No.单元格（即每个条目的首行）
const slNoCells = document.querySelectorAll('tbody td:first-child:not(:empty)');

slNoCells.forEach(cell => {
  // 提取编号数字
  const slNumber = parseInt(cell.textContent.trim());
  if (slNumber % 2 === 1) {
    // 给当前行（编号+文件号行）加背景类
    cell.parentElement.classList.add('odd-entry');
    // 给下一行（主题行）也加类
    const nextRow = cell.parentElement.nextElementSibling;
    if (nextRow) {
      nextRow.classList.add('odd-entry');
    }
  }
});

CSS

.odd-entry {
  background-color: #f5f5f5; /* 浅灰色背景，可自定义 */
}

方案2：重构HTML结构适配纯CSS选择器 #

如果可以调整HTML，推荐用多个<tbody>标签包裹每个条目——浏览器允许一个表格包含多个<tbody>，这样就能用:nth-of-type(odd)精准选中奇数条目下的所有行：

示例代码 #

HTML

<table border="1">
  <thead>
    <tr>
      <th>Sl. No.</th>
      <th>File No.</th>
    </tr>
    <tr>
      <th colspan="2">Subject</th>
    </tr>
  </thead>
  <!-- 条目1：奇数编号 -->
  <tbody>
    <tr>
      <td>1.</td>
      <td>1/2/34-gr</td>
    </tr>
    <tr>
      <td colspan="2">美观表格</td>
    </tr>
  </tbody>
  <!-- 条目2：偶数编号 -->
  <tbody>
    <tr>
      <td>2.</td>
      <td>1/2/34-gr</td>
    </tr>
    <tr>
      <td colspan="2">美观表格</td>
    </tr>
  </tbody>
  <!-- 以此类推 -->
</table>

CSS

/* 给奇数tbody下的所有行设置背景色 */
tbody:nth-of-type(odd) tr {
  background-color: #f5f5f5;
}

方案对比 #

• 方案1：无需修改现有HTML，适合已有项目的快速修复，但依赖JavaScript运行。
• 方案2：纯CSS实现，更优雅易维护，但需要调整HTML结构。

内容的提问来源于stack exchange，提问作者Laishram Pilot