display: table-row 从 IE8 起兼容良好，但仅模拟 <tr> 行为，需父元素为 display: table、子元素为 display: table-cell，不支持 flex/grid 特性、响应式布局及 sticky 定位。
display: table-row 在 IE8+ 中能用，但别指望它响应式
这个属性本身没有兼容性问题——display: table-row 从 IE8 开始就支持，Chrome/Firefox/Safari 也早都稳了。问题出在「你为什么想用它」：很多人想靠它模拟 Flex 或 Grid 的行为，比如让几列等高、自动换行、响应式堆叠……它做不到。
它只做一件事：让一个元素表现得像 <tr>。这意味着：
- 它的父容器必须是
display: table（或table-cell等合法上下文），否则无效 - 它内部的子元素必须是
display: table-cell，不能直接放div或文本 - 它不接受
flex相关属性，也不响应width: 100%这类常规布局控制
display: table-row 和真实 <tr> 的行为差异
视觉上很像，但 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 上。
