如何设置CSS使HTML表格第二行宽度适配第一行并缩放内部图片？

可以通过以下CSS设置实现需求：

核心CSS代码 #

.signatur {
  width: fit-content; /* 表格宽度由第一行内容决定，避免被第二行图片撑大 */
  border-collapse: collapse; /* 可选，消除单元格默认间距 */
}

.signatur .logo {
  width: 100px; /* 固定logo列宽度，可根据实际logo尺寸调整 */
  white-space: nowrap; /* 防止logo列内容意外换行 */
}

.signatur .strich img {
  width: 100%; /* 图片自适应单元格宽度 */
  height: auto; /* 保持图片原始比例，避免变形 */
}

修改后的完整代码 #

<table class="signatur">
  <tr>
    <td class="logo">
      <img
        src="http://www.pfimba.ch/fileadmin/Grafiken/Icons/logo_rgb_email_signatur.png"
        alt="logo"
        style="height: 75px"
      />
    </td>
    <td class="person">
      Max Mustermann v/o KingJulian <br />
      Abteilungsleiter <br />
      <a href="mailto:xxx">xxx</a>
    </td>
  </tr>
  <tr style="height: 30px">
    <td class="strich" colspan="2">
      <img
        src="http://www.pfimba.ch/fileadmin/Grafiken/Icons/00_abteilung_strich.png"
        alt="strich"
      />
    </td>
  </tr>
</table>

关键属性说明 #

• width: fit-content：让表格宽度完全适配第一行内容的总宽度，彻底避免第二行的宽图片强制拉伸表格
• 给.logo列设置固定宽度：锁定第一列的宽度，确保其不会随内容变化
• 第二行图片的width: 100%：让图片完全填充所在单元格的宽度（即表格的总宽度），height: auto保证图片比例不变形

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