如何在CSS中使用布局制作表格样式布局_Display table和table-cell应用

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 元素会并排显示，并且高度始终保持一致，即使内容不等。

Logomaster.ai

Logo在线生成工具

99

查看详情

常见应用场景与技巧

这种布局方式适合以下情况：

• 卡片布局：多个卡片高度一致，视觉整齐。
• 表单对齐：标签与输入框对齐，保持垂直一致性。
• 响应式前的兼容布局：在不支持 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 依然是一个有效选择。

基本上就这些，掌握它能在特定场景下快速解决问题，但不要滥用。

以上就是如何在CSS中使用布局制作表格样式布局_Display table和table-cell应用的详细内容，更多请关注php中文网其它相关文章！