display: table-row 从 ie8 起兼容良好，但仅模拟 行为，需父元素为 display: table、子元素为 display: table-cell，不支持 flex/grid 特性、响应式布局及 sticky 定位。
display: table-row 在 IE8+ 中能用，但别指望它响应式
这个属性本身没有兼容性问题——display: table-row 从 IE8 开始就支持，Chrome/Firefox/Safari 也早都稳了。问题出在「你为什么想用它」：很多人想靠它模拟 Flex 或 Grid 的行为，比如让几列等高、自动换行、响应式堆叠……它做不到。
它只做一件事：让一个元素表现得像 <tr>。这意味着：
<ul>
<li>它的父容器必须是 <code>display: table（或 table-cell 等合法上下文），否则无效
display: table-cell，不能直接放 div 或文本flex 相关属性，也不响应 width: 100% 这类常规布局控制display: table-row 和真实 的行为差异
视觉上很像，但 DOM 行为完全不同：display: table-row 是纯样式模拟，不会改变语义、可访问性或表格专有 API（比如 HTMLTableRowElement.rows）。
常见误用场景：
- 把
div 设成 display: table-row，里面塞 p 标签——没报错，但 p 会塌陷（默认 display: block，在 table 上下文中被强制重置）
- 想用
display: table-row 实现「横向滚动的表格行」——不行，table 布局不支持 overflow-x 对 row 生效
- 和
position: sticky 搭配——大多数浏览器不支持 sticky 在 table-row 上生效
替代方案比硬撑 table-row 更靠谱
如果你真需要「等高多列+内容对齐」，现代方案更可控：
- Flexbox：父容器
display: flex，子项自动等高，加 flex-wrap: wrap 支持折行
- Grid：用
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) 实现响应式列数
- 如果必须兼容 IE9 及以下，
display: table 套路仍可工作，但得写全：table → table-row → table-cell，缺一不可
注意：display: table 容器的宽度计算方式和普通块级元素不同——它默认收缩内容，常需显式设 width: 100% 或 table-layout: fixed 来稳定列宽。
调试 display: table-row 失效的三步检查
页面没反应？不是语法错了，大概率是上下文断了：
- 检查父元素是否设置了
display: table（不是 block 或 flex）
- 检查子元素是否用了
display: table-cell（inline、block 都会被忽略）
- 打开 DevTools，看 computed 样式里
display 是否真的显示为 table-row——如果显示为 block，说明被更高优先级规则覆盖了
IE 下还容易踩一个坑：display: table-row 元素不能有 margin，设了也没用；想留空隙，得用 padding 加在 table-cell 上。
视觉上很像，但 DOM 行为完全不同：display: table-row 是纯样式模拟，不会改变语义、可访问性或表格专有 API（比如 HTMLTableRowElement.rows）。
常见误用场景：
- 把
div设成display: table-row，里面塞p标签——没报错，但p会塌陷（默认display: block，在 table 上下文中被强制重置） - 想用
display: table-row实现「横向滚动的表格行」——不行，table 布局不支持 overflow-x 对 row 生效 - 和
position: sticky搭配——大多数浏览器不支持 sticky 在table-row上生效
替代方案比硬撑 table-row 更靠谱
如果你真需要「等高多列+内容对齐」，现代方案更可控：
- Flexbox：父容器
display: flex，子项自动等高，加flex-wrap: wrap支持折行 - Grid：用
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr))实现响应式列数 - 如果必须兼容 IE9 及以下，
display: table套路仍可工作，但得写全：table→table-row→table-cell，缺一不可
注意：display: table 容器的宽度计算方式和普通块级元素不同——它默认收缩内容，常需显式设 width: 100% 或 table-layout: fixed 来稳定列宽。
调试 display: table-row 失效的三步检查
页面没反应？不是语法错了，大概率是上下文断了：
- 检查父元素是否设置了
display: table（不是block或flex） - 检查子元素是否用了
display: table-cell（inline、block都会被忽略） - 打开 DevTools，看 computed 样式里
display是否真的显示为table-row——如果显示为block，说明被更高优先级规则覆盖了
IE 下还容易踩一个坑：display: table-row 元素不能有 margin，设了也没用；想留空隙，得用 padding 加在 table-cell 上。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
