如何实现自适应列宽且带max-width的nowrap溢出隐藏表格？

当然可以实现这个需求！你遇到的表格无视max-width的问题，根源在于table元素默认的table-layout: auto布局规则——它会优先根据单元格内容的宽度来计算整个表格的宽度，导致你设置的max-width被内容撑开失效。

关键修改点 #

只需要调整CSS，给表格加上固定布局属性，再合理分配列宽即可：

table {
  border: 1px solid black;
  max-width: 300px;
  table-layout: fixed; /* 核心：启用固定表格布局，让max-width生效 */
  width: 100%; /* 配合max-width，使表格在不超过300px时自适应父容器 */
}
td:first-child {
  border-right: 1px solid black;
  width: calc(100% - 40px); /* 自动填充剩余空间，给右侧列预留40px宽度 */
}
td {
  white-space: nowrap; /* 强制文本不换行 */
  overflow-x: hidden; /* 超出部分隐藏 */
  /* 可选优化：添加省略号提示内容被截断 */
  /* text-overflow: ellipsis; */
}

完整代码示例 #

<table>
  <tr>
    <td>Lorem Ipsum is simply dummy text of the printing and typesetting industry</td>
    <td>22</td>
  </tr>
</table>

原理说明 #

• table-layout: fixed：让表格优先遵循你设置的宽度（包括max-width），不再根据内容自动拉伸表格整体宽度。
• width: calc(100% - 40px)：给第一列分配剩余空间，右侧列会自动适配自身内容（你也可以给右侧列设置固定宽度，比如width: 40px）。
• 保留white-space: nowrap和overflow-x: hidden，确保单元格内文本不换行、超出部分隐藏。

内容的提问来源于stack exchange，提问作者Savo Pejović