现代项目中禁用display:table双栏布局，因其结构敏感易塌陷：外层缺width:100%、table-cell无显式宽、层级被div打断、高度不等、移动端无法响应式切单列，且调试需严格校验display层级与vertical-align等属性。
现代项目里用 display: table 做双栏布局，基本等于主动放弃语义、可访问性和响应式能力——除非你正在维护一个必须兼容 IE8–IE10 的政府或银行老系统。
为什么 display: table 在双栏中会塌陷或错位
这套写法对 HTML 结构极其敏感，不是“写对了就行”，而是“错一点就全垮”：
- 外层容器漏了
width: 100%（尤其在 IE 下）→ 整体宽度塌成内容宽度 -
table-cell元素没设显式width（比如只写width: 100%）→ IE 不认，按内容收缩，右侧常被挤到下一行 - 中间插了个
div或用了fieldset→ 打断table-row→table-cell失效 - 左右两栏内容高度不一致 → 背景色/边框无法对齐，因为
table-cell默认不等高（得靠vertical-align: middle或 JS 补救）
移动端下 display: table 完全失效的根源
它不支持媒体查询自动切单列：无论屏幕多窄，table-cell 仍强行横排。常见补救方式反而埋坑：
- 用 JS 监听
resize动态切换类名 → 触发频繁重排，滚动卡顿 - 加
min-width强制最小宽度 → 小屏出现横向滚动条，用户必须拖拽才能看全 - 套一层
@media改display→ IE8 不支持媒体查询，直接白屏
真正能用的响应式双栏，只能靠 flexbox 或 grid 配合 @media 控制断点。
调试时怎么快速验证是不是 display: table 的锅
打开 Chrome DevTools，在 Elements 面板里选中疑似出问题的容器，然后看 Styles 面板里是否同时满足以下三点：
- 有
display: table（外层） - 子元素有
display: table-row - 孙元素有
display: table-cell且没配vertical-align
如果满足，再检查这些值是否都显式写了：width、table-layout: fixed（IE 下建议加）、vertical-align: top。缺任意一个，都可能在某个浏览器里突然错位。
最麻烦的不是写不出来，而是改起来牵一发而动全身——table-cell 的尺寸计算依赖整行所有单元格，加个 padding 或 border 都可能让另一栏偏移。真要动手修，往往意味着你已经站在技术债的悬崖边上。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
