display: table 和 table-cell 可使元素表现如表格，实现等高列布局；通过将父容器设为 display: table，子元素设为 display: table-cell，可让各列自动等高并横向排列，适用于旧浏览器兼容或无需Flexbox/Grid的场景。该方法支持垂直对齐和均匀填充，但缺乏现代布局的灵活性，且不利于语义化与维护，建议仅在特定情况下使用。
在CSS中，利用 display: table 和 display: table-cell 可以创建类似HTML表格的布局效果，而无需使用实际的 <table> 标签。这种技术适用于需要等高列、水平排列且自动填充容器的场景，尤其在不使用Flexbox或Grid的老式布局中非常实用。
什么是 display: table 和 table-cell？
CSS 的 display 属性允许元素表现得像表格结构中的不同部分：
-
display: table —— 元素像
<table>一样显示，占据容器宽度，支持边框和间距。 -
display: table-row —— 元素像
<tr>一样显示，用于包裹“单元格”。 -
display: table-cell —— 元素像
<td>或<th>一样显示，自动横向排列并等高。
这些值不会改变HTML语义，但能实现视觉上的表格布局，适合构建灵活的UI组件。
基本用法：创建等高列布局
使用 display: table 和 table-cell 最大的优势是所有“单元格”自动等高，内容最多的列决定整体高度。
立即学习“前端免费学习笔记（深入）”；
<div class="table-layout"> <div class="cell">左侧内容较短</div> <div class="cell">右侧内容较多，会撑高整个行，左侧也会随之变高。</div> </div>
上面代码中，两个 .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 依然是一个有效选择。
基本上就这些，掌握它能在特定场景下快速解决问题，但不要滥用。
