CSS表格布局属性有哪些？

本文深入解析了CSS表格布局的核心属性及其实际应用技巧，重点揭示了table-layout（auto与fixed模式的性能差异及适用场景）、border-collapse（合并边框的关键作用与常见误区）、text-align与vertical-align（单元格内对齐的精准控制逻辑），以及display: table系列属性（在非语义化布局中实现等高、垂直居中等经典难题的轻量可靠方案），既有性能优化的实战建议，也覆盖兼容性考量与易错细节，为开发者提供一套兼顾效率、稳定与可维护性的表格布局方法论。

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 计算高度更轻量、更可靠。

本篇关于《CSS表格布局属性有哪些？》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！