为何我的15×15表格单元格无法呈现正方形形态？

问题分析 #

你的表格整体已通过height:100vw设置为正方形，但单元格仍呈矩形，核心原因是：

• 未给<th>设置明确的宽高占比，表格默认自动布局会根据内容拉伸单元格
• 盒模型未统一，border宽度会额外撑开单元格尺寸，破坏正方形比例

修复后的CSS代码 #

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box; /* 让border和padding计入元素宽高，避免额外撑开 */
}
table {
  width: 100%;
  height: 100vw; /* 保持表格为正方形（高度等于视口宽度） */
  border: 3px solid red;
  border-collapse: collapse;
  table-layout: fixed; /* 强制固定布局，忽略内容对单元格尺寸的影响 */
}
tr th {
  border: 2px solid black;
  width: calc(100% / 15); /* 每个单元格宽度为表格的1/15 */
  height: calc(100% / 15); /* 每个单元格高度为表格的1/15 */
  overflow: hidden; /* 防止单元格内内容溢出撑开尺寸 */
  text-align: center; /* 可选：让单元格内容居中显示 */
}

关键修改说明 #

1. box-sizing: border-box：将边框和内边距纳入元素的宽高计算，确保设置的宽高是单元格的实际尺寸，不会因为border额外变大
2. table-layout: fixed：关闭表格的自动布局逻辑，强制按设定的宽高比例渲染单元格，不受内容长度影响
3. calc(100% / 15)：精确分配每个单元格的宽高占比，保证15个单元格刚好填满正方形表格

内容的提问来源于stack exchange，提问作者Newbie_Coder