核心思路 #

利用表格默认的table-layout: auto（自适应列宽）特性，给第三列的<td>设置max-width强制长内容换行，同时通过word-wrap: break-word解决逐词换行问题，无需额外嵌套标签，完美适配动态加载内容。

代码实现 #

HTML结构

<div class="table-container">
  <table>
    <colgroup>
      <col>
      <col>
      <col class="third-col">
      <col>
    </colgroup>
    <thead>
      <tr>
        <th>列1</th>
        <th>列2</th>
        <th>列3</th>
        <th>列4</th>
      </tr>
    </thead>
    <tbody>
      <!-- 动态加载的内容 -->
    </tbody>
  </table>
</div>

CSS样式

.table-container {
  width: 800px; /* 固定容器宽度 */
  overflow-x: auto; /* 超出时横向滚动 */
}

table {
  width: 100%; /* 表格占满容器，同时保持自适应列宽 */
  border-collapse: collapse;
}

/* 除第三列外，所有单元格强制不换行 */
table th:not(.third-col),
table td:not(.third-col) {
  white-space: nowrap;
  padding: 8px;
  border: 1px solid #ddd;
}

/* 第三列基础配置（可选：设置最小宽度避免内容过窄） */
.colgroup .third-col {
  min-width: 150px;
}

/* 第三列核心样式：长内容换行，短内容自适应 */
table td.third-col {
  max-width: 300px; /* 长内容时的最大宽度 */
  word-wrap: break-word; /* 强制截断长单词换行 */
  padding: 8px;
  border: 1px solid #ddd;
}

为什么这个方案可行？ #

1. 避免固定宽度陷阱：保留默认的table-layout: auto，让表格根据动态内容自动调整列宽，无需预设固定值
2. 精准控制换行：max-width直接作用于<td>，内容超过阈值时自动换行；内容较短时，列宽会自适应内容实际宽度
3. 解决逐词换行问题：word-wrap: break-word强制截断长单词，不会因为单词过长导致列宽异常撑开
4. 无额外标签依赖：完全通过CSS实现，不需要在<td>内嵌套<div>

可选优化 #

如果需要更灵活的断词逻辑，可以用overflow-wrap: anywhere替代word-wrap: break-word，前者在计算列最小宽度时会考虑断词后的宽度，适配性更强。

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