无需table-layout:fixed，如何限制表格不超父容器宽度并适配列宽？

要实现你需要的效果，无需依赖table-layout: fixed，可通过以下CSS调整达成需求：

• 表格设置width: 100%，确保整体宽度被约束在父容器范围内
• 第一列用white-space: nowrap阻止内容换行，自然适配自身最长内容的宽度（等效max-content效果）
• 第二列设置width: 100%强制占据剩余空间，同时添加溢出省略样式，保持white-space: nowrap让内容不换行

完整代码示例 #

CSS

div {
  width: 600px;
  border: 1px solid blue;
}

table {
  border-collapse: collapse;
  width: 100%;
}

td {
  border: 1px dotted black;
}

td:first-of-type {
  white-space: nowrap;
}

td:last-of-type {
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

HTML

<div>
  <table>
    <tr><td>Entry 1:</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>
    <tr><td>Entry 23:</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>
    <tr><td>Entry 487248231:</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>
  </table>
</div>

原理说明 #

• 表格width: 100%直接限制整体宽度，避免被长内容撑破父容器
• 第一列通过white-space: nowrap确保内容不换行，自动匹配自身最长内容的宽度
• 第二列width: 100%会填充表格剩余所有空间，溢出样式则处理过长内容，实现省略效果

你之前尝试的两种方案问题点：

1. table-layout: fixed模式下，浏览器会忽略内容尺寸按预设规则分配列宽，因此max-content无法生效
2. 未设置table-layout: fixed且不给第二列加width: 100%时，表格会优先适配所有内容总宽度，导致超出父容器

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