不该用 display: table 时：布局需响应式、语义清晰、可访问性强，且不模拟表格数据结构；它强制表格渲染逻辑，限制 margin、vertical-align，无法优雅折行，误用于导航栏等场景。
什么时候不该用 display: table
当你的布局目标是响应式、语义清晰、可访问性强，且不需要严格模拟表格数据结构时，display: table 就是过载方案。它会强制元素遵循表格渲染逻辑：比如 table-cell 无法设置 margin，vertical-align 行为受限，且在小屏幕下几乎无法通过媒体查询优雅折行。
常见误用场景包括：导航栏、卡片列表、表单行、按钮组——这些本该用 flexbox 或 grid 实现的 UI 模块，却被写成 display: table-cell + display: table-row 的“伪表格”。
flexbox 替代表格行（tr）和单元格（td）的关键配置
核心思路：把容器设为 display: flex，子项自动成为弹性项目，无需模拟表格层级。
-
flex-direction: row对应表格默认的横向排列（tr→td） -
align-items: center替代vertical-align: middle -
justify-content: space-between或space-around替代text-align+padding手动对齐 - 用
flex: 1、flex: 0 0 200px等控制“列宽”，比table-layout: fixed更灵活
.row {
display: flex;
align-items: center;
gap: 1rem; /* 替代 margin hack，现代且可靠 */
}
.cell {
flex: 1; /* 自适应宽度 */
}
.cell.fixed {
flex: 0 0 120px; /* 固定宽度列 */
}响应式折行：flex-wrap 是表格做不到的硬优势
传统表格在移动端只能横向滚动或强制缩放，而 flexbox 可直接让“行内单元格”在空间不足时换行，且保持语义与可访问性不变。
立即学习“前端免费学习笔记（深入）”；
-
flex-wrap: wrap启用折行，子项自动换到下一行 - 配合
min-width控制最小列宽，避免内容被过度挤压 - 用
@media调整flex-direction（如从row改为column），实现真正垂直堆叠
.responsive-row {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
}
.responsive-row > * {
min-width: 200px; /* 防止列太窄 */
}
@media (max-width: 600px) {
.responsive-row {
flex-direction: column;
}
}注意兼容性与可访问性陷阱
IE11 对 flexbox 的支持存在已知 bug：比如 flex: 1 在某些嵌套场景下失效，gap 完全不支持。如果必须兼容 IE11，需回退到 margin 模拟间隙，并避免使用 flex-grow / flex-shrink 的简写组合。
- 屏幕阅读器能正确识别
div+role="row"/role="cell"，但不会把纯display: flex当作表格；若内容本质是数据表格，仍应使用真实<table> -
flexbox不提供表格的跨行/跨列能力（rowspan/colspan），这类需求请改用grid - 不要为了“看起来像表格”而滥用
flex；结构决定布局方式——语义化 HTML 永远优先于视觉效果
