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