html单元格如何设置高度和宽度一样

直接设 width 和 height 无效，应采用 padding-bottom:100% 模拟正方形或 aspect-ratio+table-layout:fixed 锁死尺寸，避免被内容撑开。

table 单元格宽高相等的常见误区

直接给 td 或 th 同时设 width 和 height 通常无效——浏览器会按内容撑开，尤其文字换行或内边距不一致时，高度根本不可控。真正起作用的是让单元格变成“正方形容器”，而不是强行拉伸。

CSS 中用 padding-bottom 实现正方形单元格

这是最稳定、兼容性最好的方案，原理是利用 padding-bottom 百分比值相对于父容器宽度计算的特性，制造一个宽高比为 1:1 的占位区域。

常见错误现象：height: 100px; width: 100px; 在表格中失效；aspect-ratio: 1 在老版 Safari 或 IE 中不支持。

• 给 td 或 th 设置 position: relative
• 内部加一个空 div，设 padding-bottom: 100%（相对父宽）
• 把实际内容用 position: absolute 覆盖在该区域上

<td>   <div class="square"></div>   <div class="content">✅</div> </td>

.square {padding-bottom: 100%;   width: 100%;} .content {position: absolute;   top: 0; left: 0;   width: 100%; height: 100%;}

现代写法：用 aspect-ratio + table-layout: fixed

如果只支持较新浏览器（Chrome 88+、Firefox 89+、Safari 15.4+），aspect-ratio 是最直白的解法，但必须配合 table-layout: fixed 才能约束单元格尺寸不被内容撑开。

立即学习 “ 前端免费学习笔记（深入）”；

使用场景：图标网格、棋盘格、响应式数据看板中的固定尺寸单元格。

• 给 table 加 table-layout: fixed
• 给 td 设 width（比如 width: 60px）
• 再加 aspect-ratio: 1，高度自动匹配
• 避免内容溢出：加 overflow: hidden 和 text-overflow: ellipsis（如有文本）

为什么不能只靠 height + width？

表格渲染机制决定了 height 在 td 上只是“最小高度”提示，不是强制约束。当单元格里有换行文字、line-height 较大、或上下 padding 不一致时，实际高度必然大于设定值。更麻烦的是，不同浏览器对 table-layout: auto 下高度计算逻辑还不统一。

容易踩的坑：box-sizing: border-box 对 td 的 height 几乎没影响；用 min-height 替代 height 也解决不了正方形问题；设置 font-size: 0 去除空白节点高度，会破坏可访问性。

真正关键的点是：别和表格默认布局硬刚，要么用 padding-bottom 模拟，要么用 aspect-ratio + table-layout: fixed 锁死行为——其余都是绕弯子。