最稳定语义清晰的列对齐方式是使用 :nth-child(n) 选择器，如 td:nth-child(1), th:nth-child(1) { text-align: left; } 实现第一列左对齐；colgroup + col 可预设列样式但仅支持 text-align 等有限属性；须移除已废弃的 align 属性，响应式下建议改用类名配合媒体查询。
用 CSS 选择器精准控制某列对齐
直接给 td 或 th 写内联样式虽然可行，但列级统一控制必须靠选择器。最稳定、语义清晰的方式是用 :nth-child(n) —— 它按列序号匹配，不依赖类名或结构变动。
常见错误现象：写成 tr td:first-child 结果只影响第一行首列；或误用 :nth-of-type()，在有 th 和 td 混排的 thead/tbody 中失效。
-
td:nth-child(1), th:nth-child(1) { text-align: left; }→ 第一列（含表头）左对齐 -
td:nth-child(2) { text-align: right; }→ 第二列数据右对齐（金额常用） -
td:nth-child(3) { text-align: center; }→ 第三列居中（如状态、图标列） - 若表格含
colgroup，可配合col标签预设样式：<col style="text-align: right;">，但注意它只对未被单元格自身样式覆盖时生效
用 colgroup + col 声明列级默认样式
colgroup 是 HTML 原生支持列定义的机制，适合整列表格统一风格，且优先级低于内联 style、高于后代选择器，可控性好。
性能影响小，浏览器解析快；但兼容性需注意：IE8+ 支持完整，但部分旧 Android WebView 对 col 的 style 属性支持不稳定。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 必须放在
table开始后、thead或tr之前 -
<col>默认对应一列，顺序严格对应tr中单元格数量 -
<col style="text-align: right; width: 120px;"> <col style="text-align: center;">→ 前两列分别设右对齐+固定宽、居中 - 不能写
vertical-align——col只支持width、background、border和部分文本相关属性（text-align是少数被广泛支持的）
避免内联 align 属性导致样式冲突
仍有人在 td 上写 align="right"，这会触发浏览器降级渲染逻辑：现代 Chrome/Firefox 虽能识别，但该属性已从 HTML5 标准移除，W3C 验证器报错，且与 CSS 的 text-align 优先级关系不明确，容易覆盖失败或行为不一致。
尤其当同时存在 style="text-align: center;" 和 align="right" 时，不同浏览器可能取不同值，调试困难。
- 彻底删除所有
align和valign属性，改用 CSS - 已有老项目迁移时，可用正则批量替换：
align="([^"]*)"→style="text-align: $1;"，再人工校验 - 注意：
table align="center"控制的是表格自身浮动位置，和单元格内容对齐无关，别混淆
响应式场景下列对齐的适配要点
当表格在小屏上横向滚动，或使用 display: block 模拟响应式表格时，:nth-child(n) 依然有效，但 colgroup 可能被忽略（因列概念弱化）。此时建议改用类名驱动。
容易被忽略的地方：移动端 touch 区域小，右对齐的数字列如果没留足够 padding，用户点选易误触邻列；垂直居中在窄高单元格里视觉偏上，需配合 padding 补偿。
- 为关键列加类：
<td class="col-amount">123.45</td> - CSS 中用媒体查询重置：
@media (max-width: 768px) { .col-amount { text-align: left; } } - 避免对
td直接设height强制居中，改用padding+vertical-align: middle组合更可靠
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
