表格第一列和最后一列对齐不准本质是DOM结构错位而非样式问题：行内单元格数量不一致、colgroup与实际列数不匹配、漏写<td>或滥用colspan等导致浏览器自动补全错位；应严格校验列数一致性、禁用width="20%"、启用border-collapse: collapse暴露偏差、避免colspan占位，优先裸查DOM结构。
table中第一列和最后一列对齐不准，本质是结构错位不是样式问题
直接调 text-align 或加 margin 没用——如果表格行内单元格数量不一致（比如某行漏写 <td>、或用了 <code>colspan 跨列但没对齐列数），浏览器会自动补全或错位渲染，导致视觉上“第一列左边界”和“最后一列右边界”无法对齐。最常见诱因是：T-SQL 动态拼接 HTML 时漏掉 <tr> 或 <code><td> 标签，或 <code><colgroup></colgroup> 宽度总和 ≠ 100%。
检查 colgroup 与实际列数是否严格匹配
colgroup 是唯一能提前定义列轨道的机制，但它不会自动修正 DOM 结构错误。若声明了 5 列宽度，但某行只有 4 个 <td>，最后一列就必然塌缩或偏移。
<ul><li>确认 <code><colgroup></colgroup> 内 <col> 数量 = 表头 <th> 数量 = 每行 <code><td> 数量
<li>避免用 <code>width="20%" 写死——百分比在嵌套容器中易失真，改用 width: 20% CSS 或固定像素（如 width: 120px）更稳
colspan 临时占位逻辑；需要空列就显式写 <td></td>，而不是靠 colspan="3" + 一个 <td></td>
用 border-collapse: collapse 暴露真实列宽偏差
默认 border-collapse: separate 会让边框撑开列宽，掩盖对齐误差。开启 collapse 后，列边界紧贴，一眼能看出哪列窄了、哪列被压缩。
- 给
<table> 加 <code>style="border-collapse: collapse; border: 1px solid #999;" - 配合
background: #f9f9f9给奇数行上色，方便横向扫视列对齐状态 - 若发现某列明显变窄，大概率是该列对应的所有
<td> 内容过长触发了最小宽度保护（如含长 URL、未断行文本），需加 <code>word-break: break-all按钮/操作列对齐末列时，别用
colspan强行拉伸这是最隐蔽的坑：
<td colspan="5"><button>操作</button></td>看似省事，实则让按钮脱离第 5 列的语义轨道，text-align: right对齐的是整行右端，不是第 5 列右边界。立即学习“前端免费学习笔记（深入）”；
- 正确做法：保持列数一致，前三列留空
<td></td>，第四列放数据，第五列单独放按钮 —— 按钮自然落在第 5 列轨道内 - 第五列统一设
text-align: right（如果该列数据本身右对齐），按钮也必须右对齐才能视觉连贯 - 若按钮需垂直居中，别只靠
vertical-align: middle，要确保<td> 有明确高度（如 <code>height: 40px）或内部用display: flex控制 对齐不准往往不是某个样式写错了，而是某处少了一个<td>、多了一个 <code>colspan、或colgroup和实际列数差了一列——这些结构偏差在渲染时被浏览器“悄悄修复”，反而更难定位。先关掉所有样式，用纯边框+背景色裸看 DOM 列分布，比反复调text-align有效得多。
- 正确做法：保持列数一致，前三列留空
