直接设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 才能约束单元格尺寸不被内容撑开。
立即学习“前端免费学习笔记（深入）”；
ISite企业建站系统是为懂点网站建设和HTML技术的人员（例如企业建站人员）而开发的一套专门用于企业建站的开源免费程序。本系统采用了全新的栏目维护模式，内容添加过程中，前后台菜单是一样的，需要维护前台某个栏目的内容，只需要进后台相应栏目即可，一般的企业人员只需要查看简易的说明就可以上手维护网站内容。通过自由度极高的模板系统，可以适应大多数情况的界面需求，后台带有标签生成器，建站只需要构架好HTM
使用场景：图标网格、棋盘格、响应式数据看板中的固定尺寸单元格。
- 给
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 锁死行为——其余都是绕弯子。
