用 table 实现 3×3 等宽等高九宫格，需设 table-layout: fixed、显式定义 table 的宽高（如 height: 300px），用 或首行 td 设 width: 33.33%，td 设 height: 33.33%（依赖父表像素高），配合 vertical-align: top、padding 控间隙，并加 overflow: hidden 防内容撑破。
table 布局怎么保证 3×3 单元格等宽等高？
用 <table> 做九宫格，本质是语义错位——它适合数独、日历这类真正有行列关系的表格数据，不适合通用内容展示。但如果你必须用（比如老系统兼容、CMS模板限制），关键不是“能不能”，而是“怎么压住变形”。
<ul>
<li>
<code>table 默认会根据内容自动撑开列宽行高，必须显式锁死：table-layout: fixed 是前提，否则所有宽度/高度设置都可能被内容覆盖
<col> 或第一行 <td> 的 <code>width 属性控制，写成 width: 33.33% 比 width: 33% 更稳，避免三列加起来不足 100% 留白
tr 或 td 的 height，要配合 vertical-align: top + 内容容器最小高度，否则空单元格会塌缩overflow: hidden 和 text-overflow: ellipsis 防溢出破坏网格为什么 td { height: 33.33% } 失效？
百分比高度在 table 中不生效，除非父级 table 有明确像素高度。常见错误是只给 table 设 width: 100%，却没设 height —— 这时所有百分比高度都会退化为 auto。
- 正确做法：给
table同时设width和height（例如height: 300px），再让td用height: 33.33% - 更可靠方案：放弃百分比，直接用像素值，如
td { height: 100px; width: 100px; }，配合table-layout: fixed强制均分 - 响应式场景下，
table高度无法随容器缩放，必须用 JS 监听父容器尺寸并重设table.style.height，否则在移动端必然拉伸或压缩
border-collapse 和 gap 怎么处理？
table 没有 gap，但 border-collapse: separate + border-spacing 可模拟间隙，不过它会让单元格实际占用空间变大，容易导致最后一列换行。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 推荐组合：
border-collapse: collapse（消除默认边框间距），然后用padding在td内部留白，这样间隙可控且不影响布局流 - 如果必须用
border-spacing，注意它的单位只能是像素，不能是百分比；且border-spacing: 8px实际会在每格四周加 8px，三列总宽度 = 3×格宽 + 4×8px，必须从容器宽度里扣掉这部分 - IE8–11 对
border-spacing支持完好，但 Safari 旧版有渲染抖动，测试时需真机验证
和 grid/flex 相比，table 布局最易忽略的坑
不是兼容性问题，而是行为惯性：开发者常默认 table 是“静态栅格”，但实际它对内容极其敏感——一个未设 white-space: nowrap 的长文本，或一张未约束 max-width 的图片，就能撑破整行。
- 每个
td必须单独加max-width: 0+overflow: hidden+text-overflow: ellipsis（文字）或img { max-width: 100%; height: auto; }（图片） -
colgroup里的<col>不继承样式，宽度必须用width属性写死，CSS 类无效 - 无障碍方面，纯装饰性九宫格用
table会被读屏软件误读为数据表，需加role="presentation"和aria-hidden="true"
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
