text-align 和 vertical-align 是原生表格中唯一起效的对齐属性；text-align 控制单元格内联内容水平对齐，vertical-align 解决行内元素基线错位，其余如 align-content、text-align-last 在 table 中无效。
text-align 和 vertical-align 是唯二真正起效的对齐控制点，其他如 align-content、text-align-last 在原生 <table> 中基本无效。
用 text-align 控制水平对齐（左/右/居中/两端）
这是最直接、兼容性最好的方式，作用于 <td> 或 <th> 元素本身：
-
text-align: left：默认行为，但显式声明可避免继承干扰 -
text-align: right：适合金额、编号等右对齐场景，数字列对齐更清晰 -
text-align: center：标题、状态标签常用，注意别滥用在长文本上 -
text-align: justify：中文需配合word-break: keep-all，否则单行无空格时会退化为左对齐
常见失效原因：<td> 里嵌了 <div> 或 <p> —— 这些块级子元素会“接管”对齐逻辑，text-align 只影响其内联内容，不控制子块位置。
用 vertical-align 解决输入框/文字基线错位
表格天然按行对齐，但 <label> 和 <input> 默认 baseline 不一致，尤其在 Chrome/Firefox 中 <label> 明显偏高。修复不是靠猜，而是明确控制：
立即学习“前端免费学习笔记（深入）”；
- 给
<label>和<input>同时加vertical-align: middle（最简方案） - 或删掉
<label>，改用<td>姓名：</td><td><input></td>（放弃语义化时最快） - 若必须保留
for/id绑定，<label>必须设display: block+margin: 0，再配<td>的vertical-align: middle
注意：vertical-align 只对 table-cell、inline、inline-block 元素生效，设在 <tr> 上无效。
为什么 align-content 和 text-align-last 别试
这两个属性在原生表格中就是摆设：
-
align-content是 Flex/Grid 专属，<table>不是 flex 容器，加了也白加 -
text-align-last要求容器是块级上下文，<td>是table-cell，浏览器（Chrome/Firefox/Safari）全部忽略 - 试图用 JS 拆行、包裹最后一行再设样式，既不可靠又增加维护成本，小屏缩放下极易崩
真要实现“最后一行右对齐”这类需求，就该换结构：用 display: flex; flex-direction: column 包裹内容，再加 margin-top: auto + text-align: right —— 表格语义和视觉效果本就不该强绑。
表格对齐的复杂点不在写法多，而在于它把语义（关系型数据）、布局（网格模型）、可访问性（label 绑定）、响应式（小屏溢出）全压在一个结构里。一旦发现 text-align 或 vertical-align 失效，第一反应不该是加 hack，而是检查有没有意外嵌套块级元素，或者当前场景是否真的需要 <table> —— 很多所谓“表格页面”，用 grid 写三行 CSS 就能更稳、更轻、更易维护。
