HTML表格超出容器问题：为何表格总是大于父div#quad-main？

问题描述 #

父容器#quad-main尺寸固定，表格已设置width:100%、height:100%，子元素也均设为100%高度，但表格却始终大于该div，设置max-width和max-height也无效果，请问这是为什么？

复现代码 #

CSS 代码

table { table-layout: fixed; width: 100%; height: 100%; }
#quad-main { position: absolute; top: 2.5%; right: 2.5%; width: 95%; height: 20%; border: 1px #000 solid; }
.left-align { text-align: left; }
.logo-img-style { width: 100%; height: 100%; }
#lbl-logo { width: 100%; height: 100%; object-fit: contain; }

HTML 代码

<div id="quad-main">
  <table>
    <tr>
      <th class="left-align">
        <div class="logo-img-style">
          <img id="lbl-logo" src="a_img.png" />
        </div>
      </th>
    </tr>
  </table>
</div>

问题原因分析 #

这大概率是表格的默认样式在搞鬼，具体有两个核心原因：

• 表格默认自带border-spacing（单元格间距）属性，且默认border-collapse: separate，这些额外的间距会让表格实际占据的尺寸超出父容器的100%设置。
• <th>元素默认带有内置的padding，这也会给表格增加额外的尺寸，导致整体溢出父容器。

你设置max-width/max-height无效，是因为这些默认的间距和padding属于表格的"额外尺寸"，不属于内容本身的尺寸，所以直接限制宽高无法抵消这些默认样式的影响。

解决方法 #

针对这两个原因，我们可以直接在样式里消除这些默认影响：

table { 
  table-layout: fixed; 
  width: 100%; 
  height: 100%; 
  border-collapse: collapse; /* 合并边框，消除border-spacing的间距影响 */
  margin: 0; /* 移除表格默认的外边距 */
}

th {
  padding: 0; /* 移除th的默认内边距 */
}

另外，还可以给父容器#quad-main加上overflow: hidden作为兜底，防止极端情况下的溢出：

#quad-main { 
  position: absolute; 
  top: 2.5%; 
  right: 2.5%; 
  width: 95%; 
  height: 20%; 
  border: 1px #000 solid;
  overflow: hidden; 
}

调整后，表格就会严格贴合父容器的尺寸，不会再出现溢出情况了。

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