仅在必须兼容IE8–IE10的老系统（如政府、银行旧项目）中才考虑用display: table实现双栏布局，因其严重牺牲语义性、可访问性与响应式能力，且结构敏感、易塌陷、难维护。
用 display: table 实现双栏布局的适用场景
只有在必须兼容 IE8–IE10 时才考虑用表格模拟双栏，比如政府或银行老系统维护。它不是“能用”，而是“没得选”。现代项目里写 display: table，基本等于主动放弃语义、可访问性和响应式能力。
display: table 的硬性结构要求
这套写法对 HTML 结构极其敏感，稍一错就塌：
- 外层容器必须设
display: table且显式声明width: 100%（IE 下不写 width 会塌） - 每组双栏内容必须包裹在独立的
div里，并设display: table-row - 左栏和右栏元素必须同级、直接子元素，分别设
display: table-cell - 不能嵌套
flex或grid，也不能用fieldset或额外div打断层级 - 每个
table-cell建议配vertical-align: middle，否则文字容易上下错位
常见错误现象与修复点
实际调试中最常卡在这几个地方：
- 右侧内容被挤到下一行：检查是否漏了
width—— IE 下table-cell没显式宽就会按内容收缩，哪怕写了100%也不生效，得用像素值如width: 120px - 整体高度塌陷：父容器没设
display: table，或子项没严格按table-row→table-cell层级嵌套 - 背景色不对齐：左右两个
table-cell高度由各自内容撑开，不会自动等高；想视觉统一就得靠 JS 或统一设min-height - 移动端完全失效：这套写法无法用媒体查询切单列，
display: table在小屏下仍强行横排，只能靠 JS 动态切换类名
为什么现在几乎没人用它
它解决的问题（兼容老 IE）已被构建工具和 polyfill 覆盖，而它带来的问题却没法绕开：表单标签和输入框必须手动对齐 line-height，长文本不换行会撑破容器，屏幕阅读器会把它当真实表格读——这些都不是“调一下就能好”的小问题，而是结构性缺陷。真正要动手写，往往意味着你已经站在技术债的悬崖边上。
立即学习“前端免费学习笔记（深入）”；
