怎样利用HTML表格制作九宫格布局？等宽等高单元格设置方案

作者：袖梨 2026-07-13

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），高度随内容自适应 —— 严格意义上已不是“九宫格”，而是“三列列表”