如何让表格单元格内的div自适应宽度且不参与列宽计算

默认表格使用table-layout: auto布局模式，列宽计算阶段会遍历所有单元格内容，取内容的最小无折行宽度作为列宽参考值。你给副标题加了white-space: nowrap后，副标题文本不会自动折行，浏览器会把它的全文长度算进列宽参考值，最终把列撑宽。

只需要两处样式改动，不需要硬编码任何固定宽度，完美适配响应式场景：

• 给表格添加table-layout: fixed样式，切换为固定表格布局模式。该模式下浏览器只会根据第一行的内容计算列宽，后续行的所有内容都不会参与列宽计算，也不会把列撑宽，完全符合你“副标题被列宽计算忽略”的需求。
• 给副标题div添加width: 100%，让它完全继承父单元格计算完成后的宽度，省略号截断逻辑会自动基于这个宽度生效。

完整实现代码 #

<table style="width: 100%; table-layout: fixed;">
  <tr>
    <td>
      <div>Title 1</div>
      <div style="width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
        Subtitle that might be extremely long and will be truncated with ellipsis correctly
      </div>
    </td>
    <td>
      Stuff
    </td>
  </tr>
  <tr>
    <td>
      <div>Title 2</div>
      <div style="width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
        Another very long subtitle that will never expand the table column width
      </div>
    </td>
    <td>
      More stuff
    </td>
  </tr>
</table>

方案优势 #

• 无硬编码宽度值，表格会随父容器尺寸自适应，完全兼容响应式布局
• 兼容所有主流浏览器，包括老旧版本IE
• 代码改动量极小，不需要额外加空标签、复杂定位等hack逻辑

如果你希望列宽严格按照第一行标题的内容比例分配，只需要保证第一行单元格内没有带nowrap的长内容即可，浏览器会自动按第一行内容的自然宽度比例分配整表宽度，和你原本的自适应表现几乎一致。

如果你因为特殊场景不能使用table-layout: fixed，可以通过绝对定位把副标题脱离文档流，让它不参与列宽计算：

<td style="position: relative; padding-bottom: 1.5em;">
  <div>Title 1</div>
  <div style="position: absolute; left: 8px; right: 8px; top: 1.2em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
    Long subtitle content
  </div>
</td>

这个方案需要手动调整内边距、定位偏移值适配行高和单元格默认内边距，维护成本更高，非必要不使用。

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