table-layout: auto 会遍历全部内容确定列宽，渲染慢且列宽易被长内容撑开；fixed 则仅依据第一行或显式 width 定列宽，渲染快、列宽稳定，需配合 width 设置及 word-break 等换行控制。
table-layout: auto 和 fixed 的区别直接影响渲染速度和列宽行为
浏览器默认用 table-layout: auto，它会扫描全部内容后才确定列宽——表格越大、单元格内容越不规则（比如混用长文本和短数字），渲染越慢，且列宽容易被某一行的超长内容撑开，导致整列变形。
换成 table-layout: fixed 后，浏览器只看第一行或显式设置的 width（如 th:first-child { width: 120px; }）就分配列宽，后续行内容再长也不会影响列宽，适合固定结构的数据表。
- 必须配合明确的列宽定义才生效，比如给
th或col设置width -
td内容超出时默认不换行，需加word-break: break-word或white-space: normal - IE8+ 支持，现代浏览器无兼容问题
border-collapse: collapse 是消除双线边框的关键
默认 border-collapse: separate 下，每个 td 和 th 都自带独立边框，加上 table 自身边框，容易出现“双线”或“空隙”，尤其在设置 border 后显得杂乱。
border-collapse: collapse 让相邻边框合并为一条线，真正实现“单线表格”。但要注意：它只作用于边框本身，不会自动消除 cellspacing（HTML 属性）遗留的空白——如果 HTML 中还写了 cellspacing="0"，其实已冗余；CSS 控制下应彻底删掉该属性。
- 设置后，
border-spacing失效，无需再设 -
empty-cells: show或hide才决定空单元格是否画边框 - 若某列想单独加粗边框，得用
border-left/border-right直接写在th或td上
caption-side: top/bottom 控制标题位置但受 display 影响
caption 元素默认是块级，caption-side: top（默认）让它出现在表格上方，bottom 则移至下方。但如果你给 caption 加了 display: inline 或其他值，caption-side 会失效。
更隐蔽的问题是：某些 CSS 重置库（如 normalize.css）会把 caption 设为 display: table-caption，这是正确的，但若你误写成 display: block，标题就会脱离表格流，不再响应 caption-side。
- 优先用
caption-side而非 margin/padding 模拟位置，语义更准 - 配合
text-align: center可居中标题文字，但对齐的是 caption 内容，不是整个表格 - 若需标题左对齐且靠上，直接
caption { text-align: left; }即可，不用动caption-side
隐藏空单元格或整行要用 visibility 或 display，别只靠 background
看到空 td 就加 background: transparent 或 color: transparent？这没用——单元格还在，占位、有边框、仍响应鼠标事件。真要“视觉消失”，得用 visibility: hidden（保留空间）或 display: none（完全移除）。
但注意：display: none 在 tr 上生效，但在 td 上会导致该单元格消失、同列其他行错位；而 visibility: hidden 对 td 安全，只是边框和空白还在。
- 整行隐藏用
tr.hidden { display: none; }最稳妥 - 单个空单元格隐藏用
td:empty { visibility: hidden; }，配合border: none才算真正“不可见” - 不要用
font-size: 0或line-height: 0隐藏内容，会影响可访问性
table-layout 和 border-collapse 这两个开关是否已按需打开，比堆砌十行样式更有效。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
