col的span属性仅定义列跨度，不控制对齐；text-align等样式必须写在th/td上，配合:nth-child()精准定位物理列序，且需确保colgroup与实际列数实时同步。
col 的 span 属性不控制对齐，text-align 必须写在 th/td 上
col 标签的 span 属性只定义「这个 col 影响几列」，它本身不支持 text-align、color、font-size 等视觉样式。HTML5 已废弃 col align="right" 这类写法，现代浏览器直接忽略。
真正起作用的对齐样式，必须落在单元格上：
-
th和td是实际渲染内容的元素，text-align只对它们生效 -
col上加class或style仅可用于 JS 读取（如document.querySelector('.amount-col').span），不是为了样式 - 想让第 2、3 列右对齐？得写：
th:nth-child(2), th:nth-child(3), td:nth-child(2), td:nth-child(3) { text-align: right; }
用 :nth-child() 定位 span 分组后的列范围
col span="2" 表示“从当前列开始向右占 2 列”，但它不改变 DOM 序号——th:nth-child(2) 永远是第二列，不管前面 col 有没有 span。
所以，配合 span 做语义分组时，要手动算清物理列序：
立即学习“前端免费学习笔记（深入）”；
- 表格共 5 列，
<colgroup> <col span="2"> <col span="3"> </colgroup> - 第一组对应第 1–2 列 → 用
th:nth-child(-n+2), td:nth-child(-n+2) - 第二组对应第 3–5 列 → 用
th:nth-child(n+3):nth-child(-n+5), td:nth-child(n+3):nth-child(-n+5) - 别用
:nth-of-type()：因为th和td是不同标签，序列会断开
动态表格里 col 数量和实际列数必须实时同步
JS 渲染完 <tr> 后，如果没同步更新 <code><colgroup></colgroup>，:nth-child() 选择器就会错位——比如第一行有 4 个 <th>，但 <code><colgroup></colgroup> 只写了 3 个 <col>，那第 4 列的样式就套不上。
验证方法很简单，在控制台跑这行：
Array.from(document.querySelector('tr').children).reduce((s, el) => s + (el.colSpan || 1), 0)
结果必须等于 colgroup 内所有 col 的 span 值之和（没写 span 就算 1）。
- React/Vue 场景下，确保
<colgroup></colgroup>和<thead> 在同一响应式更新周期内重绘 <li>手动拼 HTML 字符串时，别漏掉 <code>colSpan计算逻辑，尤其遇到<th colspan="2"> <li> <code>col放错位置（比如塞进<tbody>）不会报错，但 DevTools 里 <code>computed样式里根本看不到效果table-layout: fixed 下列宽影响对齐表现
设了
table { table-layout: fixed; }后，列宽由col或 CSSwidth决定，text-align的对齐区域就是这个固定宽度。这时候如果某列太窄，文字右对齐可能被截断或挤出边界。- 避免给
col写span="3" style="width: 300px"——它只让第一列宽 300px，后两列仍按默认分配 - 真要三列等宽且右对齐，得：
<col style="width: 100px"> <col style="width: 100px"> <col style="width: 100px">+td:nth-child(-n+3) { text-align: right; } - 百分比宽度需配合
table显式宽度（如width: 100%），否则100px和20%混用会导致计算错乱
最易被忽略的点：语义分组（
col+span）和样式定位（:nth-child()）是两套独立逻辑，列数一变，两边都得手动改——没人帮你自动同步。 - 避免给
