HTML表格前序列自适应宽度、最后一列文本溢出省略实现方案

无需给前两列设置任何固定宽度，仅通过少量CSS规则即可实现全部需求，核心是利用固定表格布局的宽度分配逻辑，让前两列按内容自适应、最后一列占满剩余空间，同时强制约束内容不撑破表格宽度。

关键规则说明 #

• 给表格设置table-layout: fixed和width: 100%：强制表格遵循设定的宽度边界，不会被内部长内容撑出视口范围
• 前两列不配置任何宽度属性：浏览器会自动根据单元格内容计算适配宽度，完全灵活自适应
• 给最后一列设置width: 100%：前两列按内容分配完宽度后，该列会自动占满所有剩余横向空间
• 最后一列单元格添加三个属性实现单行省略效果：white-space: nowrap保证文本不折行、overflow: hidden隐藏超出内容、text-overflow: ellipsis让超出部分显示省略号

注：多数同类教程要求给所有列设置固定宽度，是对table-layout: fixed规则的误用——该布局模式下，未设置宽度的列会自动按内容最小宽度分配空间，不需要手动指定宽度。

完整实现代码 #

<style>
.responsive-table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  border: 1px solid #333;
}
/* 前两列自适应内容宽度，仅设置内边距和边框，不设宽度 */
.responsive-table td:nth-child(1),
.responsive-table td:nth-child(2) {
  white-space: nowrap;
  padding: 6px 8px;
  border: 1px solid #333;
}
/* 最后一列占满剩余宽度，配置单行省略 */
.responsive-table td:nth-child(3) {
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 6px 8px;
  border: 1px solid #333;
}
</style>

<table class="responsive-table">
  <tbody>
    <tr>
      <td>ID</td>
      <td>Title</td>
      <td>Description</td>
    </tr>
    <tr>
      <td>123</td>
      <td>Sample Title</td>
      <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</td>
    </tr>
  </tbody>
</table>

效果验证 #

• 表格总宽度始终和视口/父容器宽度一致，不会出现横向溢出
• 前两列宽度随内容自动调整，无固定尺寸限制，内容变化时会自动适配
• 最后一列始终占满剩余横向空间，长文本单行显示，超出部分自动显示省略号
• 兼容所有现代浏览器，无需JS介入

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