CSS技术问题：表格th与td无法占满100%宽度，如何仅用CSS修复？

你的核心问题是给table设置了display: grid，这直接破坏了HTML表格的原生布局机制：

• 表格元素（table/tr/th/td）本身有一套专属的行列布局规则，强行改成grid布局后，tr、th、td会被当作独立的grid项目处理，完全失去了表格行列关联的特性，自然没法让th和td按表格逻辑撑开对齐。
• table-layout: fixed是表格专属属性，只有当元素保持默认的display: table时才会生效，改成grid后这个属性等于无效。
• 给th和td都设width: 100%，在grid布局下会让每个元素都单独占满容器宽度，导致th和td上下堆叠，而非预期的并排显示。

恢复表格的原生布局，同时实现你要的“th和td占满宽度”的效果：

.custom-table {
  width: 100%;
  table-layout: fixed; /* 保持固定布局，让列宽更可控 */
  border-collapse: collapse; /* 可选，合并边框让视觉更整洁 */
}

.custom-table th,
.custom-table td {
  width: 50%; /* 因为每行是两列，各占一半就能铺满100%宽度 */
  border: 1px solid black;
  text-align: center;
  padding: 5px;
}

关键改动说明 #

• 去掉display: grid，让table回到原生的表格布局，tr、th、td会恢复行列关联的布局逻辑。
• table-layout: fixed现在能正常生效，让表格列宽按设置的比例分配，不会被内容撑开变形。
• 给th和td设置width: 50%，因为每行有两个单元格（th+td），各占一半刚好填满整个表格的100%宽度。如果后续行列数变化，只需要调整这个百分比即可。

<table class="custom-table">
  <tbody>
    <tr>
      <th>name</th>
      <td>Alex</td>
    </tr>
  </tbody>
  
  <tbody>
    <tr>
      <th>Age</th>
      <td>30</td>
    </tr>
  </tbody>
</table>

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