第一列对齐失效主因是CSS优先级、继承干扰或选择器不精准；应优先用tr > td:nth-child(1)、检查开发者工具、避免table全局text-align、善用<col>标签，并确保框架中每行第一列单元格稳定存在。
第一列 td 和 th 无法单独对齐？先确认选择器是否生效
直接写 table td:first-child { text-align: right; } 往往无效——因为 th 或 td 的内联样式、父级 table 的 text-align，甚至 CSS 优先级更高的框架类（比如 Bootstrap 的 .text-left）都可能覆盖它。务必打开浏览器开发者工具，检查元素上最终生效的 text-align 值来自哪条规则。
- 用
:first-child时，确保目标单元格确实是该行第一个子元素（不是被colspan或隐藏元素干扰） - 更稳妥的选择器是
table tr > td:nth-child(1)或table tr > th:nth-child(1)，明确锁定第一列 - 如果表格有
thead/tbody分层，需分别处理：thead th:nth-child(1)和tbody td:nth-child(1)
text-align 在 table 上设了全局值，会继承干扰第一列
table { text-align: center; } 会让所有单元格默认居中，即使你给第一列写了 text-align: left，也可能因优先级不足而失效。这不是 bug，是 CSS 继承机制在起作用。
- 避免在
table元素上设置text-align，改用更具体的范围控制 - 若必须设全局对齐，用
table td, table th { text-align: inherit; }切断继承，再单独定义第一列 -
vertical-align同理：第一列需要顶部对齐，不能只靠table { vertical-align: top; }，得写td:nth-child(1) { vertical-align: top; }
用 <col> 标签控制第一列样式，但注意兼容性和限制
<col> 是语义上“列”的唯一原生方式，支持 text-align、width、background 等有限样式，且无需 JS 或复杂选择器。
- 必须放在
<colgroup>内，且顺序与列一一对应：<colgroup><col><col></colgroup> - 仅对标准表格结构有效；遇到
rowspan或动态生成的列，<col>可能错位 - 不支持
padding、border等盒模型属性，这些仍得用td:nth-child(1)补充 - 示例：
<colgroup> <col style="text-align: right;"> <col> </colgroup>
React/Vue 等框架里动态渲染表格，第一列对齐容易漏掉 key 或条件渲染分支
JSX 或模板中用 map 渲染行时，第一列常被写成 <td>{item.id}</td>，但若某行因条件省略了第一列（比如空数据占位），:nth-child(1) 就会匹配错列。
立即学习“前端免费学习笔记（深入）”；
- 确保每行都有且仅有 1 个第一列单元格，避免用
v-if或条件逻辑跳过它 - 用
className或显式绑定类名比依赖位置更可靠： <td class="first-col"> - 服务端渲染或 SSR 场景下，CSS-in-JS（如 Emotion）可能未将
nth-child规则注入首屏，建议搭配<col>或原子类兜底
<col> 控制基础对齐 + td:first-of-type 补充 padding/border/vertical-align —— 而不是只押注一种方式。 
