如何使用HTML和CSS创建带行列表头的8×8响应式正方形单元格表格

我来帮你搞定这个网格表格的问题！你遇到的核心问题是表格尺寸和单元格宽高的约束逻辑没理顺，尤其是在父容器占页面50%宽度的情况下，得调整CSS的优先级和约束方式。下面是修改后的完整代码，以及对应的逻辑解释：

修改后的完整代码 #

HTML部分

<div class="grid-container">
  <table id="grid-main" class="grid" cellspacing="0">
    <thead>
      <tr>
        <td></td>
        <th scope="col">A</th>
        <th scope="col">B</th>
        <th scope="col">C</th>
        <th scope="col">D</th>
        <th scope="col">E</th>
        <th scope="col">F</th>
        <th scope="col">G</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">1</th>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
      <tr>
        <th scope="row">2</th>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
      <tr>
        <th scope="row">3</th>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
      <tr>
        <th scope="row">4</th>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
      <tr>
        <th scope="row">5</th>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
      <tr>
        <th scope="row">6</th>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
      <tr>
        <th scope="row">7</th>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
    </tbody>
  </table>
</div>

CSS部分

/* 父容器设置50%宽度，给表格明确的宽度基准 */
.grid-container {
  width: 50%;
}

#grid-main {
  width: 100%;
  /* 强制表格为正方形，高度自动匹配宽度 */
  aspect-ratio: 1 / 1;
  border-collapse: collapse;
  border-spacing: 0;
}

/* 统一表头和单元格样式，确保首行与首列尺寸一致 */
#grid-main th,
#grid-main td {
  border: 1px solid #000;
  padding: 0;
  /* 每个单元格占表格宽度的1/8 */
  width: 12.5%;
  /* 强制单元格为正方形，高度随宽度自动调整 */
  aspect-ratio: 1 / 1;
  /* 可选：让表头内容居中显示 */
  text-align: center;
  vertical-align: middle;
}

/* 可选：给表头添加背景色区分 */
#grid-main thead tr,
#grid-main tbody th {
  background-color: #f0f0f0;
}

关键修改点说明 #

1. 父容器明确宽度：给包裹表格的div设置width:50%，让表格有清晰的宽度参考，避免尺寸混乱。
2. 表格强制正方形：用aspect-ratio:1/1替代原来的height:100%，这样表格高度会自动等于宽度（即父容器的50%宽度），保证整个表格是规整的正方形。
3. 统一单元格与表头样式：把th和td的样式合并，确保首行表头的高度和首列表头的宽度完全一致；同时给所有单元格设置width:12.5%和aspect-ratio:1/1，强制每个单元格都是正方形。
4. 移除冗余属性：删掉了原代码中容易冲突的height:12.5%，因为aspect-ratio已经能可靠地让高度匹配宽度。

这样修改后，不管父容器的宽度如何变化，整个表格都会保持正方形，所有单元格也都是完美的正方形，首行与首列的表头尺寸也会完全对齐。

内容的提问来源于stack exchange，提问作者Not Dylan Burns