要让table布局实现3×3等宽等高九宫格，必须设置table-layout:fixed并指定table宽度，再通过col或第一行td定义列宽，每个td单独设固定height；width:33.33%在td上仅当table有明确宽度且table-layout为fixed时才生效。
table 布局怎么让 3×3 单元格等宽等高
用 <table> 做九宫格，本质是语义正确的数独或表单场景；但想让它“视觉上等宽等高”，必须绕开表格默认行为——<td> 宽度由内容撑开、高度由行内 tallest cell 决定，不写死就容易参差。
- 给
<table>设width: 100%或具体像素（比如width: 300px），禁用table-layout: auto默认值 - 强制启用
table-layout: fixed，这样列宽才按<col>或第一行<td>的width计算，而不是内容 - 在
<tr>上设height: 33.33%不生效，得给每个<td>单独设height，且必须带单位（如height: 100px）或配合vertical-align: top+line-height控制文字居中 - 间隙靠
border-collapse: separate+border-spacing，别用cellpadding，它会挤占内容空间
为什么 width: 33.33% 在 <td> 上无效
<td> 的百分比宽度只在 table-layout: fixed 下生效，且依赖父 <table> 有明确宽度。如果 <table> 宽度是 auto（比如没设 width），那所有百分比都会被忽略，退回到内容自适应。
- 错误写法：
<td style="width: 33.33%">→ 父表无宽，此样式被丢弃 - 正确写法：先设
<table style="width: 300px; table-layout: fixed">，再设<td style="width: 33.33%">，此时三列才真正均分 - 更稳妥：用
<col>显式定义列宽，例如<col style="width: 33.33%"><col style="width: 33.33%"><col style="width: 33.34%">，避免浮点误差累积
响应式下 <table> 九宫格的致命缺陷
表格布局天生不响应：缩放时单元格不会重排，也不会换行；媒体查询改 width 容易导致横向滚动条，尤其在小屏上。
- 不能用
max-width+width: 100%自动缩放高度——height百分比在表格里不继承，aspect-ratio对<td>无效 - 想实现“正方形格子”，只能 JS 动态计算并设
height = width，或者用 padding-bottom hack 包裹一层<div>，但这就脱离了纯表格语义 - 无障碍支持弱：屏幕阅读器按表格逻辑读，但九宫格多数不是真实数据表，会被误读为“3 行 × 3 列的数据矩阵”
什么情况下才该用 <table> 做九宫格
只有两种情况值得考虑：真表格数据（比如数独题面、课程表、棋盘状态）和IE8–10 兼容性刚需（其他方案全跪，而表格能跑）。
立即学习“前端免费学习笔记（深入）”；
- 数独类：每格是独立可编辑单元，需
contenteditable或<input>，<table>天然支持行列语义与键盘导航 - 老系统维护：后端模板只能吐
<table>，前端不敢动结构，那就老老实实配table-layout: fixed+ 固定宽高 - 别为了“简单”选表格——现代项目里，
display: grid写三行 CSS 就搞定的事，硬套表格反而要多写十几行 hack 和 JS 补丁
border-spacing 后，padding 会叠加在单元格内容区外，但如果你又用了 box-sizing: border-box，就会发现高度算不准——因为表格单元格的盒模型不完全遵循标准，border-box 在 <td> 上行为不稳定。 
