如何为表头含preferred类的未知列序HTML表格整列添加样式

有两种成熟方案可以实现需求，无需提前知道preferred类所在的列序号：

方案1：CSS :has() 原生实现（优先选择） #

目前Chrome 105+、Firefox 121+、Safari 15.4+都支持，覆盖95%以上的全球用户，无需写JS：

/* 为所有带preferred类的表头添加样式 */
th.preferred {
  background: #e8f4fd;
  font-weight: bold;
}

/* 匹配和preferred表头同列的所有单元格，10列表格写到nth-child(10)即可 */
table:has(th.preferred:nth-child(1)) td:nth-child(1),
table:has(th.preferred:nth-child(2)) td:nth-child(2),
table:has(th.preferred:nth-child(3)) td:nth-child(3),
table:has(th.preferred:nth-child(4)) td:nth-child(4),
table:has(th.preferred:nth-child(5)) td:nth-child(5),
table:has(th.preferred:nth-child(6)) td:nth-child(6),
table:has(th.preferred:nth-child(7)) td:nth-child(7),
table:has(th.preferred:nth-child(8)) td:nth-child(8),
table:has(th.preferred:nth-child(9)) td:nth-child(9),
table:has(th.preferred:nth-child(10)) td:nth-child(10) {
  background: #e8f4fd;
}

方案2：JS + col标签实现（全兼容） #

如果需要兼容老版本浏览器，用这个方案，所有浏览器都支持：
首先给表格添加colgroup标签，列数和实际列数一致：

<table>
  <colgroup>
    <col><col><col><col><col><col><col><col><col><col> <!-- 10列对应10个col标签 -->
  </colgroup>
  <thead>
    <tr>
      <th></th>
      <th></th>
      <th class="preferred"></th>
      <!-- 其余表头内容 -->
    </tr>
  </thead>
  <tbody>
    <!-- 原有表格内容不变 -->
  </tbody>
</table>

添加以下JS代码，自动识别preferred列并标记对应列：

document.querySelectorAll('table th.preferred').forEach(th => {
  // 获取当前表头的列索引
  const colIndex = [...th.parentNode.children].indexOf(th);
  // 给对应列的col标签添加样式类
  th.closest('table').querySelectorAll('col')[colIndex].classList.add('preferred-col');
});

最后添加CSS样式即可生效：

th.preferred, .preferred-col {
  background: #e8f4fd;
  border-left: 2px solid #2196f3;
}

内容的提问来源于stack exchange，提问作者Rahul Vala