纯HTML/CSS实现表格图片随动态文本自动适配的方案问询

刚好遇到过类似的布局需求，纯CSS就能完美解决，不需要任何脚本。下面是符合你要求的完整代码，我会一步步拆解关键逻辑：

<table style="width: 100%; border-collapse: collapse; table-layout: auto;">
  <!-- 第一行 -->
  <tr>
    <!-- 第一列：第一张适配高度的图片 -->
    <td style="padding: 0; vertical-align: top;">
      <img src="nba-logo.png" alt="NBA Logo" style="height: 100%; width: auto; object-fit: contain; display: block;">
    </td>
    <!-- 第二列：固定宽度间隔列 -->
    <td rowspan="2" style="width: 1em; padding-left: 1em;">&nbsp;</td>
    <!-- 第三列：第一行不换行文本 -->
    <td style="width: 0; white-space: nowrap; vertical-align: top;">
      这是第一行的未知长度多行文本<br>
      第二行文本内容<br>
      第三行更多内容
    </td>
    <!-- 第四列：右侧剩余空间 -->
    <td rowspan="2" style="width: 100%;">&nbsp;</td>
  </tr>
  <!-- 第二行 -->
  <tr>
    <!-- 第一列：第二张适配宽度的图片 -->
    <td style="padding: 0; vertical-align: top; width: inherit;">
      <img src="nhl-logo.png" alt="NHL Logo" style="width: 100%; height: auto; object-fit: contain; display: block;">
    </td>
    <!-- 第三列：第二行不换行文本 -->
    <td style="width: 0; white-space: nowrap; vertical-align: top;">
      第二行的未知长度多行文本<br>
      额外的文本行
    </td>
  </tr>
</table>

关键逻辑拆解： #

1. 表格基础配置

   • table-layout: auto：让表格自动根据内容计算列宽，这样第一列的宽度会由第一张图的自适应宽度决定，不需要手动设置。
   • border-collapse: collapse：移除单元格默认的边框间隙，避免布局偏移。
   • width: 100%：让表格占满父容器宽度，配合第四列的width:100%实现右侧剩余空间填充。

2. 第一行图片（高度适配第三列）

   • height: 100%：强制图片高度填满所在单元格，而这个单元格的高度完全由第三列第一行的文本内容撑开，完美实现“图片高度等于第三列100%高度”的要求。
   • width: auto：自动根据图片原始宽高比计算宽度，保证图片不会拉伸变形。
   • display: block：消除图片作为行内元素时底部的默认间隙，避免单元格高度额外增加。
   • object-fit: contain：保险措施，确保图片完整显示（即使极端情况下图片比例导致宽度超出单元格，也会自动缩放而不裁切）。

3. 第二行图片（宽度适配第一行图片）

   • width: 100%：让图片宽度填满所在单元格，而表格的第一列宽度已经被第一行的图片确定，因此这张图的宽度会和第一行图片完全一致。
   • height: auto：同样根据原始宽高比自动计算高度，保持图片比例不变。
   • 同样使用display:block和object-fit:contain保证显示效果。

4. 第三列文本处理

   • width: 0 + white-space: nowrap：让单元格宽度完全由不换行的文本内容决定，不会额外占用多余空间，完美适配“未知尺寸多行不换行文本”的需求。

5. 其他列配置

   • 第二列的rowspan="2" + width:1em; padding-left:1em：实现固定宽度的间隔列，和你要求的完全一致。
   • 第四列的rowspan="2" + width:100%：占据表格右侧所有剩余空间，让布局更合理。

注意事项： #

• 确保图片本身的宽高比正确，这样缩放后才不会出现变形问题。
• 如果需要图片和文本垂直居中，可以把vertical-align: top改成vertical-align: middle。
• 若担心图片加载失败导致单元格塌陷，可以给第一列的td设置min-width和min-height作为兜底样式（比如min-width: 50px; min-height: 50px）。

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