table-layout: fixed 是强制列宽稳定的前提，因其将列宽计算提前至首行渲染时完成，后续各行严格服从该宽度；必须配合显式 width（如 100%）及 col 或首行 th 宽度声明才生效。
table-layout: fixed 是强制列宽稳定的前提
表格列宽自动撑开、左右错位，根本原因常是浏览器默认的 table-layout: auto —— 它会扫描所有单元格内容再计算列宽，一旦某行有超长文本或未截断数字，整列就突然变宽，其他行跟着“歪掉”。
必须显式设 table-layout: fixed，让浏览器按第一行 col 或 th 的宽度定义来分配列宽，后续内容再长也不会影响布局。
- 搭配
width使用才生效：只写table-layout: fixed不设表宽，列宽仍可能坍缩；建议同时设width: 100%或具体像素值 -
col元素比th更可靠：用<col width="120"><col width="80">显式声明，比靠th的width属性更稳定（后者在某些浏览器中会被忽略） - 避免混用百分比和像素：比如
width="20%"×5 列 ≠ 100%，因边框、内边距、字体渲染误差累积，容易触发换行或溢出
text-align + font-family 配合才能真正对齐数字
单纯给金额列加 text-align: right，小数点依然会错位——因为默认字体（如 sans-serif）不是等宽，1 和 0 宽度不同，123.45 和 9999.00 实际占据像素不一致。
右对齐数字必须同步控制字体：
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
- 加
font-family: 'Consolas', 'Courier New', monospace，确保每个字符等宽 - 若项目禁用等宽字体，可用
letter-spacing微调，但效果有限，不推荐 - 别依赖
td align="right"：HTML5 已废弃该属性，Firefox 新版直接忽略，Chrome 行为也不一致
vertical-align: middle 为什么看起来没效果？
写了 vertical-align: middle 却不见文字居中，大概率是因为单元格没“高度空间”——它不是让文字在整张表里垂直居中，而是让内容在当前单元格的**行高范围内**对齐。
- 如果单元格只有单行文本且没设
height或足够padding，实际高度≈行高，middle 就等于“没动” - 给
td加padding: 8px 12px是最轻量的解法，比硬设height更安全（避免内容溢出） - 含图片或按钮的复杂单元格，
vertical-align常失效，此时改用display: flex; align-items: center更可控，但注意性能：大量单元格都用 flex 会拖慢渲染
动态生成表格时结构错误是隐形杀手
T-SQL 或后端模板拼接 HTML 表格时，@tableHTML 看似输出整齐，但只要漏掉一个 <td> 或多一个引号（比如 <th width="20%"">），浏览器就会把后续内容当纯文本渲染，导致整行数据“掉出表格”，视觉上就是列完全错乱。
- 检查是否每行都有完整
<tr>...</tr>，每个单元格都包裹在<td>或<th>内 - 避免在
<tr>后直接拼接字符串（如'Anaplan 2024-06-15'），必须先包进<td> - 用浏览器开发者工具的 Elements 面板看 DOM 结构，而不是只信源码字符串——DOM 解析错误才是真实问题源头
列宽固定和文本对齐看似简单，真正卡住人的往往是 table-layout 的触发条件、字体与对齐的耦合、以及动态生成时那一个没闭合的标签。这些点不显眼，但改完立刻见效。
