设置table宽度为100%时<td>的max-width属性被忽略如何解决？

问题原因 #

你遇到的是table-layout: fixed布局模式的固有特性：该模式下表格列宽仅由第一行的单元格宽度、表格总宽度决定，不会识别<td>上设置的max-width属性，所以你的150px限制才会失效，只有min-width能正常作用。

修复方案 #

你可以根据业务场景选择以下两种常用方案：

• 方案1：删除table的table-layout: fixed配置，同时给<td>增加文本换行规则避免长内容撑宽，适配自适应需求：

table {
    width: 100%;
}
td {
     min-width: 60px;
     max-width: 150px;
     height: 40px;
     /* 新增文本换行规则，防止长内容撑破宽度限制 */
     word-wrap: break-word;
     word-break: break-all;
}

修改后单元格宽度会在60px到150px之间跟随屏幕尺寸自动调整，符合你最初的需求。

• 方案2：保留table-layout: fixed，在每个<td>内部嵌套一层<div>，把宽度限制写在内部div上，适合需要固定表格布局、避免内容动态变化打乱表格结构的场景：

table {
    table-layout: fixed;
    width: 100%;
}
td {
     height: 40px;
}
td > div {
    min-width: 60px;
    max-width: 150px;
    /* 可按需加溢出控制，比如溢出隐藏显示省略号 */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

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