直接给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 在这个阶段完全不参与计算——它只在“容器级”起作用，压不住内部单元格撑开。

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

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 的正确姿势

列宽由 <col> 固定后，max-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，二者冲突

容易被忽略的兼容与布局陷阱

table-layout: fixed 让所有列严格按 <col> 宽度分配，哪怕某列内容为空——列宽总和小于 table 宽度时，右侧会出现空白；总和超了则触发横向滚动。这不是 bug，是设计行为。

立即学习“前端免费学习笔记（深入）”；

如果父容器用了 flex 或 grid，<table> 默认会被拉伸，需额外加 <code>align-self: flex-start；margin: 0 auto 才能让 max-width 居中，直接塞进 可能因默认 margin 偏移。