表格行table-row与grid布局宽度不一致，如何保留grid并修复？

当把表格中的行从默认的table-row改为grid后，该行会脱离表格的原生布局约束，导致宽度和其他行不一致。要保留Grid布局同时解决这个问题，可通过以下CSS设置修复：

• 给Grid行设置width: 100%，强制它继承表格的宽度
• 用grid-template-columns定义列宽，和表格列对齐（单列表格设为1fr即可让单元格占满整行）
• 开启box-sizing: border-box，避免边框宽度影响整体尺寸计算

修改后的CSS代码：

table {
  border-collapse: collapse;
  width: 400px;
}
tr {
  border: 5px solid orange;
  box-sizing: border-box; /* 统一盒模型计算逻辑 */
}
td {
  height: 50px;
}
tr.grid {
  border-color: green;
  display: grid;
  width: 100%; /* 占满表格宽度 */
  grid-template-columns: 1fr; /* 单列占满整行空间 */
}

对应的HTML代码保持不变：

<table>
  <tr>
    <td></td>
  </tr>
  <tr class="grid">
    <td></td>
  </tr>
</table>

如果是多列表格，只需根据表格列数和宽度比例调整grid-template-columns的值即可，比如两列等宽可设为1fr 1fr，保证和原生表格列布局匹配。

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