仅设置<tr>高度与colgroup时，HTML表格尺寸的正确设置方法

直接给你最适配的解决方案：

• 给表格设置 width: fit-content 和 height: fit-content
  这两个CSS属性会让表格完全根据内部所有行高的总和、列宽的总和来计算自身的宽高，完全脱离父容器的尺寸限制，正好实现你想要的“自下而上”计算逻辑，不会出现依赖父容器的问题。

• 额外加个 table-layout: fixed 更稳妥
  这个属性能强制表格严格遵循<colgroup>里定义的列宽，不会因为单元格内容过长自动撑开列，确保表格尺寸完全由你手动设置的行高、列宽决定，不会出现意外的尺寸偏差。

示例代码：

<table style="width: fit-content; height: fit-content; table-layout: fixed;">
  <colgroup>
    <col style="width: 120px;">
    <col style="width: 180px;">
  </colgroup>
  <tbody>
    <tr style="height: 60px;">
      <td>单元格内容</td>
      <td>单元格内容</td>
    </tr>
    <tr style="height: 80px;">
      <td>单元格内容</td>
      <td>单元格内容</td>
    </tr>
  </tbody>
</table>

关于父容器遮罩：
父容器只需要设置固定宽高+overflow: hidden就行，表格会自己计算好独立尺寸，父容器只负责显示局部，两者完全互不影响。

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