col元素本身不渲染且不继承font-weight，需用col:nth-child(n) > *或thead th:nth-child(n)/tbody td:nth-child(n)选择器作用于单元格；遇rowspan/colspan时nth-child失效，应改用类名或JS动态添加；务必显式闭合thead/tbody以确保样式正确。
用 col 元素配合 font-weight 无效？那是没写对选择器
直接给 <col> 标签加 font-weight: bold 不起作用，因为 <col> 是一个“不可渲染”的元数据标签，它不承载内容，也不继承文本样式。浏览器不会把字体粗细应用到它身上。
真正起作用的是 CSS 的列选择器：用 col:nth-child(n) 配合 > * 向下选中该列下的所有单元格内容：
col:nth-child(2) > * {
font-weight: bold;
}注意必须带 > *，否则样式不会穿透到 <td> 或 <th> 内部。
更稳妥的做法：用 tbody td:nth-child(n) 和 thead th:nth-child(n) 分开处理
当表格有 <thead> 和 <tbody> 结构时，col 元素的样式继承容易出错（尤其在 Safari 或旧版 Edge 中）。推荐显式指定：
立即学习“前端免费学习笔记（深入）”；
-
thead th:nth-child(3)控制表头第 3 列加粗 -
tbody td:nth-child(3)控制数据行第 3 列加粗 - 如果某列混合了
<th>和<td>（比如响应式表格），统一用tr > :nth-child(3)
这样兼容性更好，也避免因 <colgroup> 缺失或错位导致样式失效。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
遇到 rowspan 或 colspan 时，nth-child 还准吗？
不准——:nth-child(n) 是按 DOM 顺序数的“第几个子元素”，不是按视觉列位置。一旦某行用了 colspan="2"，后续单元格的索引就会偏移。
解决办法只有两个：
- 放弃纯 CSS，改用类名控制：给目标列每个单元格手动加
class="col-bold"，再写.col-bold { font-weight: bold; } - 用 JS 动态打标（适合动态生成的表格）：
document.querySelectorAll('tr').forEach(row => row.cells[1]?.classList.add('col-bold'))（这里加粗第 2 列，索引为 1）
别试图用 :nth-of-type 或伪类绕过——它们对 <td>/<th> 没有列语义。
为什么不用 <strong> 包裹每个单元格内容？
可以，但不推荐：
- 语义污染：加粗只是视觉强调，不代表内容重要性提升；滥用
<strong>会干扰屏幕阅读器和 SEO - 维护成本高：每新增一行都要重复写
<strong>，无法批量控制 - 样式耦合：如果哪天要改成背景高亮或颜色变更，就得全量替换 HTML，而不是改一行 CSS
除非是极简静态页且列数固定、无 JS 交互，否则优先走 CSS 列选择器路线。
最易被忽略的一点：表格列样式是否生效，取决于你有没有正确闭合 <thead> 和 <tbody> —— 浏览器自动补全 DOM 时可能打乱 nth-child 计算顺序，建议始终显式写出这些包裹标签。
