直接给td设max-width无效是因为table默认table-layout:auto，此时列宽由内容决定，max-width不参与计算；必须设置table{table-layout:fixed;width:100%}，并用col定义列宽，再配合overflow-wrap或text-overflow等文本控制策略。
为什么直接给 td 设 max-width 没效果
浏览器对表格单元格的宽度计算，优先级是：width > 内容自然宽度 > min-width / max-width。而默认的 table-layout: auto 会先扫描所有行的内容来决定列宽，max-width 在这个阶段完全不参与计算——它只在“容器级”起作用，压不住内部单元格撑开。
table-layout: fixed 是前提，不是可选项
没有它，max-width、min-width、甚至 width 都可能被忽略或行为不可控。必须显式设置：
-
table { table-layout: fixed; width: 100%; }（width不能省，否则表宽由内容最小宽度决定） -
<colgroup></colgroup>必须紧贴<table> 开始后、<code><thead> 前，顺序错就全失效 <li>用 <code><col style="width: 200px">定义列基准宽度，别依赖th或td上的width属性 - 允许折行：
td { max-width: 200px; overflow-wrap: break-word; }（别用已废弃的word-wrap） - 单行截断：
td { max-width: 200px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } - 强制断字（慎用）：
td { max-width: 200px; word-break: break-all; }，会把 URL、UUID 等硬拆开 - 避免同时设
white-space: nowrap和overflow-wrap: break-word，二者冲突
给 td 加 max-width 的正确姿势
列宽由 <col> 固定后，max-width 才能作为单格内容的约束底线。但要注意：它只对块级盒模型生效，所以必须配合文本换行或截断策略：
容易被忽略的兼容与布局陷阱
table-layout: fixed 让所有列严格按 <col> 宽度分配，哪怕某列内容为空——列宽总和小于 table 宽度时，右侧会出现空白；总和超了则触发横向滚动。这不是 bug，是设计行为。
如果父容器用了 flex 或 grid，<table> 默认会被拉伸，需额外加 <code>align-self: flex-start；margin: 0 auto 才能让 max-width 居中，直接塞进 可能因默认 margin 偏移。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
