无法实现真正等宽等高的九宫格，因其单元格高度受内容驱动、height属性仅为建议值，即使启用table-layout: fixed也仅可控列宽而不可控行高，且响应式与无障碍支持差，推荐改用display: grid。
用 想让三列表格“看起来”等宽，必须启用固定布局，并给第一行 <table> 做九宫格，本质是“假九宫格”——它能排 3×3 结构，但无法真正保证等宽等高，尤其在内容不均、字体缩放或缩放视图下容易变形。<h3>为什么 <code><table> 很难做到严格等宽等高<p>表格单元格（<code><td>）默认按内容撑开，即使设了 <code>width: 33.33% 和 height: 33.33%，浏览器仍会优先尊重内容尺寸；table-layout: fixed 可强制列宽由第一行决定，但行高依然不可控——height 在 <td> 上是建议值，不是约束值。<ul><li>设 <code>height: 100px 在 <td> 上，若内容超高，它会撑开，父 <code><tr> 高度随之突破<li>
<code>vertical-align: middle 只控制内容对齐，不改变单元格自身高度计算逻辑
% 宽度基于 table 容器，但高度无法用百分比可靠继承（height: 33.33% 在 <td> 中常被忽略）<h3>
<code>table-layout: fixed + 显式 width 是唯一可控起点
<td> 设宽度，否则浏览器按内容自动分配列宽：<pre class='brush:php;toolbar:false;'><table style="table-layout: fixed; width: 100%; height: 300px;">
<tr>
<td style="width: 33.33%"></td>
<td style="width: 33.33%"></td>
<td style="width: 33.34%"></td>
</tr>
<!-- 后续行无需再设 width -->
<tr><td>1</td><td>2</td><td>3</td></tr>
<tr><td>4</td><td>5</td><td>6</td></tr>
<tr><td>7</td><td>8</td><td>9</td></tr>
</table></pre><ul><li>
<code>table-layout: fixed 让列宽只由第一行 <td> 的 <code>width 决定，后续内容不影响列宽33.33% 33.33% 33.34% 防止浮点误差导致最后一列换行<table> 必须有明确高度（如 <code>height: 300px），否则 <tr> 高度由内容驱动，无法等分<h3>强行统一高度的代价：内容截断或溢出</h3>
<p>若硬要每格高度一致，只能靠包裹容器 + <code>overflow: hidden 或 line-clamp 控制内容，但这是妥协方案：
立即学习“前端免费学习笔记（深入）”；
<td style="height: 100px; overflow: hidden;">
<div style="height: 100%; display: flex; align-items: center; justify-content: center;">
内容
</div>
</td>- 直接在
<td> 上设 <code>height不可靠，必须套一层<div> 并用 flex 居中<li> <code>overflow: hidden会裁剪超出部分，不适合图文混排或可交互内容 - 在移动端，缩放文字时，
height固定值易导致文字被切，无障碍阅读也受影响
真正需要等宽等高的九宫格，<table> 不是合适工具——它语义是二维数据，不是 UI 网格。哪怕你调通了，后续加 hover 动画、响应式断点、无障碍焦点管理都会比 <code>display: grid 多绕三步。那些“能跑就行”的旧项目里还能见，新项目里该换就换。
