table-layout: fixed 是防表格变形的硬性前提，需配合 width 声明和 col 或首行 th/td 的 width 控制列宽，单元格内溢出内容须按场景用 white-space 与 overflow 精确处理。

table-layout: fixed 是防变形的硬性前提

不加 table-layout: fixed，表格列宽完全由内容决定，长 URL、无空格 base64、连续中文段落会直接撑爆整列，其他列被压缩到看不见——这不是 bug，是浏览器默认的 auto 布局行为。只写 table-layout: fixed 也不够，必须同时声明 width（如 width: 100% 或具体像素值），否则固定布局无法计算列宽基准，min-width 和 <col> 都失效。

列宽控制必须靠 或首行 th/td 的 width，不是靠 td 自身 min-width

td { min-width: 120px } 在 fixed 布局下基本无效，因为列宽由第一行（或 <col>）定义，后续单元格只是“填入”，不参与宽度计算。正确做法是：

• 用 <col style="width: 150px"> 显式定义每列基准宽度（推荐，语义清晰）
• 或在 <thead> 首行的 <code><th> 上写 <code>style="width: 150px"（兼容性略好，但易被 JS 动态内容覆盖）
• 避免混合使用百分比和像素值，比如 <col style="width: 30%"> + <col style="width: 200px"> 会导致总宽失控

内容溢出要分场景处理：换行 or 截断

防变形不只是控列宽，还要管单元格里“装不下”的内容：


HTML汇报生成器
🚀 不用写一行代码！把项目总结、工作汇报、研究报告、技术文档、提案、数据看板直接变精美HTML。12种主题 × 11种背景动效 × 9种鼠标特效 × 10种边框样式 × 实时调色器 × 毛玻璃卡片 × PDF导出，生成后还能自由调色，零门槛AI直出。触发词：项目总结、工作汇报、PPT、生成报告、做个总结、HTML文档、数据报告、流程文档、会议纪要、技术文档、研究报告、数据看板、提案、做个展示页、帮我做个汇报、文档生成。
下载
• 允许折行：给 td 加 white-space: normal; word-break: break-word;（中文、URL、base64 都能断）
• 强制单行+省略：必须配 white-space: nowrap; overflow: hidden; text-overflow: ellipsis;，且该 td 得有 max-width（仅设 min-width 不起作用）
• 千万别对整张表设 white-space: nowrap，它会让所有列失去折行能力，窄屏必横向溢出

外层容器的 min-width 比 table 自身的更重要

直接给 table 加 min-width: 480px 大概率没反应——表格宽度最终受父容器约束。真正兜底的是包裹它的 div：

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

• 用 <div class="table-wrapper"><table></table></div>
• .table-wrapper { min-width: 480px; overflow-x: auto; }
• 避免把 table 直接塞进 display: flex 容器，flex 默认压缩子项，fixed 布局也会被干扰

colspan 单元格会绕过所有列宽控制，它本质是“删掉右边 n−1 个单元格”，不是“拉宽自己”。如果必须用，优先放在末尾列，或提前用 <col> 把主数据区列宽钉死。