table-layout: fixed 配合 <colgroup><col> 显式设宽及单元格内 word-break、white-space、max-width 控制，是防止表格内容挤压的根本方案。

table-layout: fixed 是解决内容挤压最直接有效的手段，但仅设它还不够——真正起效的是配合 <col> 显式声明列宽，以及对单元格内容做换行控制。

为什么内容会挤压？常见错误现象

表格列宽被长文本、无空格字符串（如 URL、base64 ID）或图片强行撑开，导致其他列被压缩到看不见，甚至整行错位；white-space: nowrap 或未设 word-break 是元凶；table-layout: auto 下浏览器按内容“猜”宽度，结果不可控。

• 浏览器默认把 <col> 的 width: auto 当作无效，哪怕写了也不会触发重算
• 在 table-layout: fixed 下，<col> 的 style="width: 120px" 才真正生效
• td 内部图片没设 max-width: 100%，会直接突破列宽限制

用 <colgroup> + table-layout: fixed 锁定列宽

这是防止挤压的底层锚点。必须同时满足三个条件：显式 <colgroup>、每个 <col> 带 width、table 上设 table-layout: fixed。

• <colgroup> 要紧贴 <table> 开始后第一行，不能放在 <thead> 后面
• 列数必须和实际 tr 中的单元格总数一致，否则错位
• 固定列（如操作按钮列）用具体像素值，如 <col style="width: 80px">；内容列可用 minmax(160px, 200px)（需配合 JS 动态设置，CSS 不支持）

让内容在列内“软着陆”的 CSS 组合

即使列宽锁死，内容仍可能溢出或堆成一团。关键靠三行 CSS 控制单元格内部行为：

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

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

• word-break: break-word（兼容性好）或 word-wrap: break-word：处理长单词、URL 等无空格串
• white-space: normal：确保换行生效（别漏掉这个，很多人只设了 break-word 却忘了它）
• max-width: 100% 加 height: auto：约束图片、视频等替换元素，避免它们无视列宽

移动端挤压的退化处理

小屏下硬撑多列表格只会更糟。与其让内容被挤成一条细线，不如主动折叠：

• 用媒体查询把 <colgroup> 中非关键列设为 display: none，并在对应 td 上加 data-label="价格" 属性供 JS 提取
• 对最后一列（如操作列），改用 position: sticky; right: 0 保持可见，但需包裹在 overflow-x: auto 容器里
• 完全放弃表格结构时，用 display: contents 把 tr/td 变成语义透明容器，再套 grid 或 flex —— 这样既保可访问性，又解除了列宽绑定

最容易被忽略的是：所有这些控制都依赖 <colgroup> 存在且完整。少一个 <col>，整行列宽逻辑就崩了——不是报错，而是静默失效，你得靠 DevTools 逐个检查 computed width 才能发现。