display: table 和 table-cell 可使元素表现如表格，实现等高列布局；通过将父容器设为 display: table，子元素设为 display: table-cell，可让各列自动等高并横向排列，适用于旧浏览器兼容或无需Flexbox/Grid的场景。该方法支持垂直对齐和均匀填充，但缺乏现代布局的灵活性，且不利于语义化与维护，建议仅在特定情况下使用。
在CSS中，利用 display: table 和 display: table-cell 可以创建类似HTML表格的布局效果，而无需使用实际的 标签。这种技术适用于需要等高列、水平排列且自动填充容器的场景，尤其在不使用Flexbox或Grid的老式布局中非常实用。什么是 display: table 和 table-cell？
CSS 的 display 属性允许元素表现得像表格结构中的不同部分：
-
display: table —— 元素像
一样显示，占据容器宽度，支持边框和间距。-
display: table-row —— 元素像
一样显示，用于包裹“单元格”。-
display: table-cell —— 元素像
或 | 一样显示，自动横向排列并等高。 这些值不会改变HTML语义，但能实现视觉上的表格布局，适合构建灵活的UI组件。
基本用法：创建等高列布局
使用 display: table 和 table-cell 最大的优势是所有“单元格”自动等高，内容最多的列决定整体高度。
左侧内容较短
右侧内容较多，会撑高整个行，左侧也会随之变高。
上面代码中，两个 .cell 元素会并排显示，并且高度始终保持一致，即使内容不等。
常见应用场景与技巧
这种布局方式适合以下情况：
-
卡片布局：多个卡片高度一致，视觉整齐。
-
表单对齐：标签与输入框对齐，保持垂直一致性。
-
响应式前的兼容布局：在不支持 Flexbox 的旧浏览器中提供替代方案。
注意点：
- 无法直接使用
margin 分隔 table-cell 元素，建议用 border-spacing（需父级为 display: table 且设置 border-collapse: separate）。
- 如果希望换行，需要用多个
display: table-row 包裹。
- 不支持
flex 或 grid 的动态伸缩行为，灵活性较低。
与现代布局的对比
虽然 display: table 能解决等高问题，但现在更推荐使用 Flexbox 或 CSS Grid：
- Flexbox 用
align-items: stretch 默认实现等高列，更简洁。
- Grid 提供更强的二维控制能力。
- table-cell 布局语义不清，不利于可访问性和维护。
但在需要兼容IE8/9时，或者快速实现简单等高效果，display: table 依然是一个有效选择。
基本上就这些，掌握它能在特定场景下快速解决问题，但不要滥用。
| |
