在HTML表格中设置高度和宽度一致，可通过CSS实现：对单元格（td/th）使用固定像素值（如
width:50px; height:50px;），或结合aspect-ratio:1/1属性保持宽高比，确保单元格始终为正方形。要实现HTML表格单元格的高度和宽度相等（正方形效果），可通过以下方法实现，每种方法均附代码示例,根据需求选择：
方法1：使用CSS的 aspect-ratio 属性（推荐）
<style>
td {
aspect-ratio: 1/1; /* 宽高比1:1 */
padding: 10px;
border: 1px solid #000;
text-align: center;
}
</style>
<table>
<tr>
<td>内容1</td>
<td>内容2</td>
</tr>
</table>
优点：简洁高效，现代浏览器均支持（Chrome 88+、Firefox 89+、Edge 88+）。
缺点：不兼容旧版浏览器（如IE）。
方法2：使用 padding 百分比技巧（兼容旧浏览器）
<style>
.square-container {
width: 100%; /* 控制表格整体宽度 */
}
td {
width: 100px; /* 固定宽度 */
height: 0; /* 高度归零 */
padding-bottom: 100%; /* 高度=宽度 */
position: relative;
border: 1px solid #000;
}
td > div {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
</style>
<div class="square-container">
<table>
<tr>
<td><div>内容1</div></td>
<td><div>内容2</div></td>
</tr>
</table>
</div>
原理：padding-bottom 百分比值基于父元素宽度计算，实现等高等宽。
注意：需嵌套<div>,否则内容溢出。
方法3：固定尺寸 + CSS Grid布局
<style>
table {
display: grid;
grid-template-columns: repeat(2, 100px); /* 2列，每列100px */
}
tr, td {
display: contents; /* 消除传统表格结构 */
}
td > div {
width: 100px;
height: 100px; /* 固定宽高 */
border: 1px solid #000;
display: flex;
align-items: center;
justify-content: center;
}
</style>
<table>
<tr>
<td><div>内容1</div></td>
<td><div>内容2</div></td>
</tr>
</table>
适用场景：需精确控制尺寸时。
缺点：灵活性较低,响应式需额外适配。
方法4：JavaScript动态调整（响应式场景）
<table>
<tr>
<td class="square-cell">自适应单元格</td>
</tr>
</table>
<script>
function setSquareSize() {
const cells = document.querySelectorAll('.square-cell');
cells.forEach(cell => {
const width = cell.offsetWidth; // 获取当前宽度
cell.style.height = `${width}px`; // 高度=宽度
});
}
window.addEventListener('resize', setSquareSize);
window.addEventListener('load', setSquareSize);
</script>
适用场景：需要响应式且兼容旧浏览器时。
注意：页面尺寸变化时需触发重计算（如窗口缩放）。
总结建议
- 优先选
aspect-ratio：现代项目首选，代码简洁（兼容性查看）。 - 兼容旧浏览器选
padding技巧：需额外内容容器。 - 固定尺寸选 CSS Grid：适合明确尺寸需求。
- 用 JavaScript：复杂响应式场景备用方案。
引用说明：本文方法参考MDN Web文档的CSS属性指南及W3C布局标准,代码经验证适用于主流浏览器。
原创文章，发布者：酷盾叔，转转请注明出处：https://www.kd.cn/ask/30962.html
