table-layout 控制列宽计算方式：auto 模式需等内容加载完测量，导致卡顿；fixed 模式快且可强制截断，但需显式设宽；border-collapse: collapse 合并边框，禁用 border-spacing；text-align 与 vertical-align 分别控制水平与垂直对齐；display: table-cell 用于等高、垂直居中等布局场景。
table-layout 控制列宽计算方式
表格列宽怎么算，全看 table-layout。默认是 auto，浏览器得等所有内容加载完、逐个测量每格最宽文本后才确定列宽——页面卡顿、首屏慢的常见元凶之一。
-
table-layout: auto：安全但慢；适合内容长度不可控、不介意渲染延迟的后台表格 -
table-layout: fixed：快，且能强制截断超长内容（配合overflow: hidden; white-space: nowrap; text-overflow: ellipsis）；但必须显式设置table宽度或给col/th设宽，否则列宽可能塌缩为 0 - 一旦设为
fixed，td内容再宽也不会撑开列——这是特性，不是 bug
border-collapse 决定边框是否合并
默认 border-collapse: separate 会让 table 和 td 各自画边框，出现“双线”；而 collapse 才是真正意义上的单一边框。
-
border-collapse: collapse时，border-spacing和empty-cells失效，必须用border统一控制线条粗细与颜色 - 想加间距？别用
border-spacing（它只对separate有效），改用padding或外层margin - 注意：
th和td的border必须明确写，否则collapse下某些边可能消失
text-align 与 vertical-align 控制单元格内对齐
text-align 管水平，vertical-align 管垂直——但后者只对 table-cell 生效，对普通块级元素无效。
-
text-align: center让文字居中，但不会影响图片或子元素的垂直位置 -
vertical-align: middle是常用值，但它对整行生效：同一tr下所有td会按最高那个单元格对齐，不是各自独立居中 - 如果
td里嵌了div想垂直居中，别依赖vertical-align，改用display: flex或line-height配合单行文本
display: table 相关值用于非语义化布局
用 display: table 系列属性（如 table-cell）模拟表格行为，不是为了画表格，而是解决「等高列」「垂直居中」「响应式多列」这类经典布局问题。
立即学习“前端免费学习笔记（深入）”；
-
display: table-cell元素天然等高，且支持vertical-align，比 Flexbox 在旧版 IE 中更稳 - 但不支持
margin，想留空隙只能靠padding或伪元素 - 若父容器没设
display: table，直接给子元素设table-cell会失效——顺序不能错
实际项目里，table-layout: fixed + border-collapse: collapse 是数据表格的黄金组合；而 display: table-cell 则常被遗忘在角落，但它在处理老系统兼容性或简单等高需求时，依然比 js 计算高度更轻量、更可靠。