为何表格列内联样式未生效？周六周日列背景色无法变红

核心问题在于：<col> 标签的样式是间接作用到表格单元格的，哪怕你用了内联样式，它的优先级也干不过直接写在 <td>/<th> 上的样式——哪怕外部CSS里的单元格样式是普通选择器，没有 !important。

你遇到的情况，大概率是外部CSS文件里针对 td 或 th 写了背景色规则，比如：

table td {
  background-color: #ffffff;
}

这种直接作用在单元格上的样式，会覆盖 <col> 传递的背景色，因为 <col> 的样式只是给单元格提供一个默认值，一旦单元格自身有样式（哪怕来自外部CSS），就会优先生效。

可行的解决思路 #

• 调整外部CSS规则
  把针对所有单元格的背景色设置，改成只针对非周末的单元格，比如：

  table td:not(.weekend) {
    background-color: #ffffff;
  }
  

  然后给周六周日列的所有单元格加上 weekend 类，再单独设置背景：

  .weekend {
    background-color: red;
  }
  

• 给 <col> 的样式强制加 !important
  这是最直接的临时修复（虽不推荐滥用，但能快速生效）：

  <col style="background-color: red !important;">
  

• 放弃用 <col>，直接给单元格加样式
  渲染表格时，判断当前单元格属于周六还是周日，直接给 <td> 加内联样式或者类，比如：

  <td style="background-color: red;">...</td>
  

  这种直接作用在元素上的样式优先级最高，不会被外部CSS覆盖。

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