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