应使用colgroup配合col标签统一设置每列文字对齐，colgroup必须置于table开头、thead之前，每个col对应一列并设text-align，优先级介于内联style与外部CSS之间，可作默认对齐；但需确保col数量与表格实际列数严格一致，否则对齐错乱。
怎么给表格每列设置不同文字对齐？用 colgroup + text-align
直接在每列首个 td 或 th 上写 style="text-align:right" 看似简单，但不可靠：一旦某行漏写、或新增行没同步，对齐就错乱。真正稳定的做法是用 colgroup 统一控制整列。
colgroup 必须放在 <table> 开头、<thead> 之前，每个 <col> 对应一列，支持 text-align（也支持 width、background 等有限属性）：
<table>
<colgroup>
<col style="text-align: left">
<col style="text-align: center">
<col style="text-align: right">
</colgroup>
<thead><tr><th>姓名</th><th>部门</th><th>薪资</th></tr></thead>
<tbody>
<tr><td>张三</td><td>前端</td><td>18000</td></tr>
</tbody>
</table>
-
col的样式优先级低于单元格内联style，但高于外部 CSS 类 —— 适合做“默认列对齐”，个别单元格需覆盖时再加style -
col不支持vertical-align，垂直对齐仍要写在td或th上 - 旧版 IE 对
col的text-align支持不一致，如需兼容 IE9 及更早版本，建议 fallback 到为td:nth-child(n)写 CSS
为什么不用 td:nth-child(n) 直接选列？
用 CSS 选择器 td:nth-child(3) 确实能精准命中第 3 列所有 td，但它有个隐性陷阱：如果某行用了 colspan，后续列的序号会偏移，导致选错单元格。比如：
<tr> <td colspan="2">合并单元格</td> <td>本该是第3列</td> </tr>
这时 td:nth-child(3) 实际匹配的是合并后的第二个 td（即空单元格），而非你预期的“薪资”列。
立即学习“前端免费学习笔记（深入）”；
- 纯数据表、无
colspan/rowspan时，td:nth-child(n)安全可用 - 搭配
th:nth-child(n)一起写，否则表头对齐和数据行不一致 - 若列数动态变化（如 JS 渲染），CSS 选择器无法自动适配，必须用
colgroup或运行时加类
text-align 和 align 混用会怎样？
HTML5 已废弃 align 属性，但浏览器仍兼容解析。问题在于：当同时存在 <td align="right"> 和 style="text-align: left"，不同浏览器处理优先级不同 —— Chrome 通常以 style 为准，IE 可能按 align 渲染，结果不可控。
-
align="center"在<table>上控制表格自身浮动位置，和文字对齐无关 -
align在<tr>上的行为未标准化，部分浏览器忽略，部分只影响子元素，别依赖它 - W3C 验证器会报
Element td does not support attribute align，CI/CD 流程可能因此失败
金额列右对齐但小数点没对齐？需要额外处理
text-align: right 只让文本整体靠右，对数字列（尤其含小数点）不够精细 —— “123.45” 和 “9999.00” 右对齐后，小数点并不垂直对齐。
- CSS 中没有原生的“小数点对齐”属性，
text-align: end也不解决此问题 - 可行方案：用等宽字体 + 零填充（如
"123.45"→" 123.45"），或改用<div contenteditable>配合 JS 动态对齐（成本高） - 最务实做法：接受视觉偏差，或换用
monospace字体提升可读性，例如td.amount { font-family: monospace; text-align: right; }
列对齐真正的难点不在写法，而在「列定义是否稳定」——只要 colgroup 的列数与实际表格结构一致，样式就不会漂移；一旦加了 colspan 或动态删列，就得同步调整 col 数量，这点容易被忽略。
