无需JavaScript，如何强制表格列的td继承col指定样式？

确实，这个问题挺坑的——我当初第一次用<col>设置文本对齐的时候也懵了，怎么试都没效果！原因很简单：CSS规范里，<col>元素能影响的样式非常有限，像text-align这种单元格级别的样式，根本不会通过<col>传递给对应的<td>或<th>。不过不用慌，不用JavaScript也有好几种靠谱的解决方法：

方法1：用CSS :nth-child() 直接定位目标列 #

这是最直接也最常用的方案，不需要修改太多HTML结构，直接通过列的位置来选中所有单元格：

示例代码 #

HTML

<table>
  <thead>
    <tr>
      <th>产品名称</th>
      <th>价格</th>
      <th>库存</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>无线耳机</td>
      <td>199</td>
      <td>23</td>
    </tr>
    <tr>
      <td>蓝牙音箱</td>
      <td>399</td>
      <td>12</td>
    </tr>
  </tbody>
</table>

CSS

/* 让第2列（价格）和第3列（库存）的内容右对齐 */
table td:nth-child(2),
table td:nth-child(3),
table th:nth-child(2),
table th:nth-child(3) {
  text-align: right;
}

这个方法的好处是简单粗暴，兼容性拉满，所有现代浏览器甚至旧版IE都支持。

方法2：结合<col>的类名 + CSS :has() 选择器（灵活升级方案） #

如果你希望通过<col>的类名来标记需要对齐的列（比如列的位置可能动态调整，但类名不变），可以用CSS的:has()选择器（现在主流浏览器都支持了）来关联<col>和对应的单元格：

示例代码 #

HTML

<table>
  <colgroup>
    <col>
    <col class="align-right">
    <col class="align-right">
  </colgroup>
  <thead>
    <tr>
      <th>产品名称</th>
      <th>价格</th>
      <th>库存</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>无线耳机</td>
      <td>199</td>
      <td>23</td>
    </tr>
    <tr>
      <td>蓝牙音箱</td>
      <td>399</td>
      <td>12</td>
    </tr>
  </tbody>
</table>

CSS

/* 选中包含align-right类的第2列对应的所有单元格 */
table:has(col.align-right:nth-child(2)) td:nth-child(2),
table:has(col.align-right:nth-child(2)) th:nth-child(2) {
  text-align: right;
}

/* 选中包含align-right类的第3列对应的所有单元格 */
table:has(col.align-right:nth-child(3)) td:nth-child(3),
table:has(col.align-right:nth-child(3)) th:nth-child(3) {
  text-align: right;
}

这个方案更灵活，你只需要修改<col>的类名或位置，就能调整哪些列需要右对齐，不用改CSS里的列序号。

为什么<col>的text-align不生效？ #

补充个知识点：根据CSS规范，<col>元素仅能影响那些可以应用于整个列的属性，比如width、background-color、border（特定场景），而text-align、padding、font-size这些属于单元格自身的样式，不会通过<col>继承——毕竟<col>不是<td>的父元素，只是表格结构的“元数据”而已。

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