如何阻止tr和td高度随内容扩展？解决表格行高被撑开问题

原始HTML代码 #

<table>
  <tr>
    <td><p style="font-size: 40px">rawradical<p></td>
    <td>steaf</td>
    <td>red</td>
  </tr>
  <tr>
    <td>frage</td>
    <td>hrae</td>
    <td>plorais</td>
  </tr>
  <tr>
    <td>stufa</td>
    <td>steis</td>
    <td>arcane</td>
  </tr>
  <tr>
    <td>postrene</td>
    <td>radini</td>
    <td>postina</td>
  </tr>
</table>

需求说明 #

希望rawradical所在的<p>标签内容不影响其他单元格尺寸，使其溢出显示而非改变整行高度，尝试过table-layout: fixed以及设置tr、td、table的max-height但无效。

解决方案 #

核心思路是让目标单元格内的大字体内容脱离正常文档流，避免撑开单元格高度。具体实现如下：

1. 给目标<td>设置固定高度、相对定位，同时开启溢出控制；
2. 给<td>内的<p>设置绝对定位，使其不再影响单元格的高度计算。

修改后的代码：

<table>
  <tr>
    <!-- 给目标td设置固定高度、相对定位、溢出隐藏 -->
    <td style="height: 30px; position: relative; overflow: hidden;">
      <!-- 给p标签设置绝对定位，脱离文档流，清除默认边距 -->
      <p style="font-size: 40px; position: absolute; margin: 0;">rawradical</p>
    </td>
    <td>steaf</td>
    <td>red</td>
  </tr>
  <tr>
    <td>frage</td>
    <td>hrae</td>
    <td>plorais</td>
  </tr>
  <tr>
    <td>stufa</td>
    <td>steis</td>
    <td>arcane</td>
  </tr>
  <tr>
    <td>postrene</td>
    <td>radini</td>
    <td>postina</td>
  </tr>
</table>

原理说明 #

表格的行高默认由单元格内容撑开，max-height属性在表格元素（table/tr/td）上不生效，因为表格布局逻辑优先适配内容尺寸。通过绝对定位让<p>脱离单元格的正常布局流后，单元格的高度由设置的固定值决定，超出部分会被overflow: hidden截断（若需要滚动可改为overflow: auto）。

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