当前位置：首页 > 前端开发 > 正文

HTML表格如何设置正方形单元格？

admin
前端开发
2025-06-19
3006

在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）。

HTML表格如何设置正方形单元格？第1张

方法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>

适用场景：需精确控制尺寸时。
缺点：灵活性较低,响应式需额外适配。

HTML表格如何设置正方形单元格？第2张

方法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>

适用场景：需要响应式且兼容旧浏览器时。
注意：页面尺寸变化时需触发重计算（如窗口缩放）。