设置HTML表格高度和宽度相同，可将表格包裹在固定宽高的容器内，设置表格宽高为100%撑满容器；或直接为表格设置相同像素值的width和height属性，并添加display:block样式。
在HTML中,要实现表格单元格高度和宽度一致（即正方形效果），需要通过CSS技巧实现，由于表格布局的特殊性，直接设置height: 100%通常无效，以下是三种实用方法：
使用Padding-Bottom技巧（推荐）
原理：利用padding-bottom百分比值相对于宽度计算的特性，创建1:1比例容器。
<style>
.square-table {
width: 100%; /* 控制表格整体宽度 */
border-collapse: collapse; /* 合并边框 */
}
.square-table td {
position: relative; /* 定位基准 */
width: 20%; /* 5列示例（100%/5） */
padding-bottom: 20%; /* 关键：与宽度相同 */
border: 1px solid #ddd;
}
.square-table .content {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
padding: 8px; /* 内边距 */
box-sizing: border-box; /* 包含内边距 */
overflow: auto; /* 内容溢出滚动 */
}
</style>
<table class="square-table">
<tr>
<td><div class="content">单元格1</div></td>
<td><div class="content">单元格2</div></td>
<!-- 更多单元格... -->
</tr>
</table>
优点：
- 完美响应式,随容器宽度自动调整
- 兼容现代浏览器（IE10+）
固定宽高（简单场景适用）
直接为单元格设置固定尺寸,适合已知内容的静态表格。
<style>
.fixed-table td {
width: 100px;
height: 100px; /* 宽高相同 */
text-align: center;
vertical-align: middle;
border: 1px solid #ddd;
}
</style>
<table class="fixed-table">
<tr>
<td>内容A</td>
<td>内容B</td>
</tr>
</table>
适用场景： 尺寸固定的展示型表格
- 无需响应式布局的场景
CSS Grid布局（现代方案）
用CSS Grid替代传统表格，更灵活控制比例。
<style>
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr); /* 3列 */
gap: 10px; /* 单元格间距 */
}
.grid-cell {
aspect-ratio: 1/1; /* 关键：宽高比1:1 */
display: flex;
align-items: center;
justify-content: center;
border: 1px solid #ddd;
}
</style>
<div class="grid-container">
<div class="grid-cell">单元格1</div>
<div class="grid-cell">单元格2</div>
<!-- 更多单元格... -->
</div>
优势：
- 代码简洁（关键属性
aspect-ratio） - 精准控制比例与间距
- 移动端兼容性好（需注意IE不支持）
常见问题解决溢出**：
添加overflow: auto或overflow: hidden控制溢出行为。
-
边框影响尺寸：
使用box-sizing: border-box包含边框和内边距。
-
多行文本居中：
用Flex布局（display: flex; align-items: center; justify-content: center）。
方法选择建议
| 场景 | 推荐方法 |
|---|---|
| 响应式动态表格 | Padding-Bottom |
| 固定尺寸表格 | 固定宽高 |
| 现代浏览器项目 | CSS Grid |
引用说明：本文解决方案参考MDN Web文档的CSS Box Model和Aspect-Ratio技术规范，遵循W3C标准实现跨浏览器兼容性。
原创文章，发布者：酷盾叔，转转请注明出处：https://www.kd.cn/ask/30993.html
