能但不该：table可实现3×3视觉效果，但语义错误、响应式差、维护难，仅限IE8或老旧CMS等特殊场景；现代项目应优先选用CSS Grid或Flexbox。
用 <table> 做九宫格？真能但不该
直接说结论：<table> 能做出视觉上 3×3 的格子，但它是语义错误、响应式灾难、维护成本高。现代项目中除非要兼容 IE8 或嵌入老旧 CMS 模板，否则别选它。表格本质是展示二维数据，不是布局工具；强行用 colspan/rowspan 或空单元格凑九宫格，会让结构臃肿、可访问性崩坏、aspect-ratio 和 gap 全部失效。
table-layout: fixed + 百分比列宽勉强可控
如果真被逼到必须用 <table>（比如 legacy 系统导出页），关键控制点只有两个：
- 给
<table>加table-layout: fixed，否则列宽会随内容撑开，彻底失守等宽 - 显式设三列宽度：
width: 33.33% 33.33% 33.34%（注意最后一位补 0.01%，堵住浮点误差） - 所有
<td>必须设height: 0; padding-bottom: 33.33%+position: relative，再用position: absolute把内容压进去——这是唯一能保正方形的办法，因为height: 33.33%在表格里无效
示例片段：
<table style="table-layout: fixed; width: 100%;">
<col style="width: 33.33%"><col style="width: 33.33%"><col style="width: 33.34%">
<tr><td><div class="square-inner">1</div></td><td><div class="square-inner">2</div></td><td><div class="square-inner">3</div></td></tr>
<!-- ... 其余六行 -->
</table>
<p><style>
.square-inner {
position: relative;
width: 100%;
height: 0;
padding-bottom: 33.33%;
}
.square-inner::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
}
.square-inner > * {
position: absolute;
top: 0; left: 0; width: 100%; height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
</style>为什么 height 和 vertical-align 在表格里不靠谱
表格单元格的 height 是“最小高度”，不是“固定高度”；内容文字多一行，<td> 就会自动撑高，破坏等高。而 vertical-align: middle 只对行内内容起作用，对块级子元素无效。更麻烦的是：border-collapse: collapse 下边框合并会导致视觉间距错乱，想加间隙得靠 padding，但 padding 又会干扰百分比高度计算。
立即学习“前端免费学习笔记（深入）”；
- 想靠
line-height居中？只适用于单行纯文本，换行就失效 - 想用
display: flex改<td>？IE11 不认，且部分安卓 WebView 会忽略 - 真正稳定的做法：放弃
<td>自身高度控制，全部交给内部position: absolute+flex容器承载内容
等宽等高对齐最常被忽略的细节
不是写上 width: 33.33% 就万事大吉。浏览器对小数点后位数的舍入策略不同，Chrome 可能四舍五入到 33.333333%，Safari 可能截断成 33.33%。三列加起来可能变成 99.99% 或 100.01%，导致最后一列换行或溢出。所以必须手动补足 0.01% —— 这个微调在 <table> 里比在 grid 里更致命，因为表格没有 gap 隔离机制，误差会直接传导为错位。
另外，<table> 的 border-spacing 无法用百分比，只能设像素值，这意味着你无法让间距随容器缩放；而 padding 又受 box-sizing 影响，稍不注意就会让实际可用宽度跌破 33.33%。
