用 display: table 模拟九宫格列宽不准，是因为 table-layout 默认 auto，需设为 fixed 才按 CSS 宽度计算；必须配合 .parent{table-layout:fixed;width:100%}、.row{display:table-row}、.item{width:33.33%} 且高度统一由 .row 控制。
用 display: table 模拟九宫格时，为什么列宽总不准？
因为 table-layout 默认是 auto，浏览器会根据内容自动分配列宽，哪怕你写了 width: 33.3%，只要某格文字多、图片大，整列就会被撑开。必须显式设为 table-layout: fixed，让宽度严格按 CSS 声明计算。
常见错误现象：第1列窄、第2列宽、第3列最宽；或缩放页面后三列明显不等分。
-
.parent { display: table; table-layout: fixed; width: 100%; }—— 缺一不可 - 子容器（
.row）必须设display: table-row，不能只靠 div 嵌套 - 每个单元格（
.item）的width推荐写33.33%，别用1fr或calc()，table 不认这些 - 高度统一靠父级
.row设固定height，比如height: 120px；若要响应式，得配合 JS 或媒体查询重设
td 和 div + display: table-cell 哪个更稳？
纯语义化场景（如数据报表）直接用原生 <table> 标签，兼容性最好（IE8+ 都行）；但如果是 UI 组件（比如图标导航栏），用 div + display: table-cell 更灵活，避免 SEO 和可访问性干扰。
关键差异点：
立即学习“前端免费学习笔记（深入）”；
- 原生
<table>里<td>默认有vertical-align: middle，内容垂直居中天然支持；div方案需手动加vertical-align: middle -
div + table-cell必须设width才生效，否则宽度塌缩；而原生<td>在table-layout: fixed下即使没设宽也守规矩 - 两者都**不支持
aspect-ratio或padding-bottom实现正方形**——table 单元格高度由行高决定，无法基于自身宽度推导
如何让 table 九宫格在移动端也保持等高？
原生表格的行高是“整体继承”的，.row 的 height 决定所有 <td> 高度，但问题在于：小屏下如果容器变窄，文字换行会导致内容高度溢出，视觉上就“不等高”了。
解决思路不是调 line-height，而是控制内容溢出和换行行为：
- 给
.item加white-space: nowrap; overflow: hidden; text-overflow: ellipsis;，强制单行截断 - 或改用
white-space: normal; word-break: break-word;，配合max-height和display: -webkit-box多行省略（仅限现代浏览器） - 绝对不要给
<td>设height，它会和.row的height冲突；所有高度控制必须落在.row上 - 媒体查询中重设
.row的height，比如从120px→80px→60px，而不是只调字体大小
table 九宫格和 grid/flex 相比，最大的硬伤在哪？
不是兼容性，而是**间距控制能力缺失**。border-spacing 只能设统一行列间隙，无法单独控制左右/上下；padding 虽可用，但会破坏等宽逻辑——因为 padding 算进 width，而 table-cell 的盒模型在 IE 中尤其混乱。
典型踩坑场景：
- 想实现“每格之间 8px 间隙，但外边不留白”，table 做不到，必须靠父容器
padding+border-collapse: separate+border-spacing组合，且 iOS Safari 对border-spacing支持不稳定 - 想让第 5 格（中心）放大，其他缩小——table 结构锁死，无法动态重排；grid 的
grid-column: span 2或 flex 的flex-basis可轻松实现 - 响应式断点切换成 2×2 或 1×9 布局时，table 需要 JS 拆 DOM 或隐藏整行，成本远高于 grid 的
grid-template-columns切换
table 九宫格只适合内容静态、尺寸固定、兼容要求极高的老系统；新项目里，哪怕要支持 IE11，也建议用 grid + @supports 降级到 flex，而不是倒退回 table。
