HTML表格实现九宫格需三步：设table-layout:fixed、用col定义列宽（总和≈100%）、td用vh或px设高且配合border-collapse:collapse；但其不支持现代响应式，推荐grid布局。
HTML 表格能做出九宫格，但不推荐用于现代响应式场景；它适合内容语义强、结构固定、兼容性要求极高的场合（比如数独、表单模板），且必须手动控制 table、tr、td 的宽高和边框才能实现等宽等高。
为什么表格做九宫格容易出错？
浏览器默认会根据内容撑开 td 宽高，导致“等分布局”失效；border-collapse: collapse 不处理，单元格之间会有双倍边框间隙；width/height 在不同浏览器对 table 的解析差异大（尤其 IE 和旧 Safari）。
- 直接写
width="33.33%"在td上 → 多数浏览器忽略，只认table或col设置 - 用
style="width: 33.33%"给每个td→ Chrome 可能生效，Firefox 可能被重算，Safari 可能按内容优先 - 没设
table-layout: fixed→ 列宽由内容决定，不是由你写的百分比决定
真正可行的等宽等高表格九宫格设置
核心是三步：固定布局 + 显式列宽 + 单元格尺寸约束。以下代码在 Chrome/Firefox/Safari/Edge（含 IE11）均能稳定呈现 3×3 正方形格子：
<table style="table-layout: fixed; width: 300px; height: 300px; border-collapse: collapse;">
<col style="width: 33.33%"><col style="width: 33.33%"><col style="width: 33.34%">
<tr>
<td style="height: 33.33vh; border: 1px solid #ccc; text-align: center;">1</td>
<td style="height: 33.33vh; border: 1px solid #ccc; text-align: center;">2</td>
<td style="height: 33.33vh; border: 1px solid #ccc; text-align: center;">3</td>
</tr>
<tr>
<td style="height: 33.33vh; border: 1px solid #ccc; text-align: center;">4</td>
<td style="height: 33.33vh; border: 1px solid #ccc; text-align: center;">5</td>
<td style="height: 33.33vh; border: 1px solid #ccc; text-align: center;">6</td>
</tr>
<tr>
<td style="height: 33.33vh; border: 1px solid #ccc; text-align: center;">7</td>
<td style="height: 33.33vh; border: 1px solid #ccc; text-align: center;">8</td>
<td style="height: 33.33vh; border: 1px solid #ccc; text-align: center;">9</td>
</tr>
</table>
-
table-layout: fixed是前提，否则col宽度无效 -
col标签设列宽（不是td），且总和必须 ≈ 100%，最后一列补足小数误差（如 33.33% + 33.33% + 33.34%） - 每行
tr不设高，但每个td必须用height（推荐vh或固定 px，禁用 % —— 百分比在td中多数浏览器不解析为父tr高的百分比） -
border-collapse: collapse消除默认 2px 间距，否则格子间有空隙
响应式表格九宫格的致命限制
表格天生不支持 minmax()、auto-fit 或 flex 响应逻辑。所谓“响应式表格九宫格”，实际只有两种妥协路径：
立即学习“前端免费学习笔记（深入）”；
- 媒体查询硬切：用
@media (max-width: 768px)把table改成display: block，再用div模拟格子 —— 这已脱离表格本质 - JS 动态重绘：监听
window.resize，计算容器宽高后重设col宽度和td高度 —— 性能差、易抖动、移动端 touch 事件可能失准 - 放弃等高：只保证等宽（靠
col），高度随内容自适应 —— 严格意义上已不是“九宫格”，而是“三列列表”
真正需要响应式九宫格时，display: grid 的 repeat(auto-fit, minmax(250px, 1fr)) 是唯一兼顾语义、性能与行为一致性的解法；表格只该留在数独、报表导出、邮件模板等不可替代场景里。
