设置width:100%且table-layout:fixed的表格max-width不生效问题排查

问题原因 #

当表格启用table-layout: fixed布局时，浏览器会优先依据表头（<th>）或表格首行的单元格宽度分配列宽，max-width属性在这种布局规则下会被忽略。fixed布局的核心是基于预设宽度分配列空间，不会响应max-width的限制；再加上第三列的文本是无空格的连续字符串，仅靠word-wrap: break-word无法触发预期的宽度约束，最终导致列宽失控。

修复方案 #

需要调整两个关键样式：

• 将第三列的max-width: 50px替换为width: 50px，在fixed布局下，width属性是固定列宽的有效声明
• 补充word-break: break-all，强制无空格的超长文本在任意字符处换行，避免撑破列宽

修改后的完整代码 #

<html>
    <head>
        <style>
            table {
                border-bottom: 1px solid black;         
                border-right: 1px solid black;         
                border-collapse: collapse;  
                table-layout: fixed;
                width: 100%;
            }
            table td, table th {    
                border-left: 1px solid black;         
                border-top: 1px solid black;              
                border-bottom: none;    
                border-right: none;
            }
            table td:nth-child(3), table th:nth-child(3) {
                width: 50px; /* 替换max-width为width */
                word-wrap: break-word;
                word-break: break-all; /* 新增强制换行规则 */
            }
        </style>
    </head>
    <body>
        <table>
            <thead>
                <th>Col1</th>
                <th>Col2</th>
                <th>Col3</th>
                <th>Col4</th>
            </thead>
            <tbody>
                <tr>
                    <td>88</td>
                    <td>888888888888</td>
                    <td>longlonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglong</td>
                    <td>88888888</td>
                </tr>
                <tr>
                    <td>AA</td>
                    <td>AAAAAAAAAAAA</td>
                    <td>longlonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglong</td>
                    <td>AAAAAAAA</td>
                </tr>
            </tbody>
        </table>
    </body>
</html>

补充说明 #

如果需要保留“最大宽度50px”的弹性（即内容少时列宽自动收缩，最多到50px），可以去掉table-layout: fixed，但这样表格会根据内容自适应宽度，无法保证整体占满容器100%。如果必须保留fixed布局，固定width是唯一能约束列宽的方式。

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