能但不该：table可实现3×3视觉效果，但语义错误、响应式差、维护难，仅限ie8或老旧cms等特殊场景；现代项目应优先选用css grid或flexbox。

用 <table> 做九宫格？真能但不该<p>直接说结论：<code><table> 能做出视觉上 3×3 的格子，但它是语义错误、响应式灾难、维护成本高。现代项目中除非要兼容 IE8 或嵌入老旧 CMS 模板，否则别选它。表格本质是展示二维数据，不是布局工具；强行用 <code>colspan/rowspan 或空单元格凑九宫格，会让结构臃肿、可访问性崩坏、aspect-ratio 和 gap 全部失效。

table-layout: fixed + 百分比列宽勉强可控

如果真被逼到必须用 <table>（比如 legacy 系统导出页），关键控制点只有两个：<ul><li>给 <code><table> 加 <code>table-layout: fixed，否则列宽会随内容撑开，彻底失守等宽

显式设三列宽度：width: 33.33% 33.33% 33.34%（注意最后一位补 0.01%，堵住浮点误差）

所有 <td> 必须设 <code>height: 0; padding-bottom: 33.33% + position: relative，再用 position: absolute 把内容压进去——这是唯一能保正方形的办法，因为 height: 33.33% 在表格里无效

示例片段：

Doc To HTML

使用 MinerU 文档处理引擎将 Word 文档（.doc、.docx）转换为保留结构和格式的干净 HTML。

下载

1

2

3

为什么 height 和 vertical-align 在表格里不靠谱

表格单元格的 height 是“最小高度”，不是“固定高度”；内容文字多一行，<td> 就会自动撑高，破坏等高。而 <code>vertical-align: middle 只对行内内容起作用，对块级子元素无效。更麻烦的是：border-collapse: collapse 下边框合并会导致视觉间距错乱，想加间隙得靠 padding，但 padding 又会干扰百分比高度计算。

• 想靠 line-height 居中？只适用于单行纯文本，换行就失效
• 想用 display: flex 改 <td>？IE11 不认，且部分安卓 WebView 会忽略<li>真正稳定的做法：放弃 <code><td> 自身高度控制，全部交给内部 <code>position: absolute + flex 容器承载内容

  等宽等高对齐最常被忽略的细节

  不是写上 width: 33.33% 就万事大吉。浏览器对小数点后位数的舍入策略不同，Chrome 可能四舍五入到 33.333333%，Safari 可能截断成 33.33%。三列加起来可能变成 99.99% 或 100.01%，导致最后一列换行或溢出。所以必须手动补足 0.01% —— 这个微调在 <table> 里比在 <code>grid 里更致命，因为表格没有 gap 隔离机制，误差会直接传导为错位。

  另外，<table> 的 <code>border-spacing 无法用百分比，只能设像素值，这意味着你无法让间距随容器缩放；而 padding 又受 box-sizing 影响，稍不注意就会让实际可用宽度跌破 33.33%。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！