table-layout: auto 并非智能适配，而是逐列扫描不可换行最长字符串（如URL）定宽，易致英文/长文本列撑爆；fixed 模式才可控，需 table 明确宽度、col 或首行 width 定义列宽，并配合 word-break 等换行控制。

table-layout: auto 为什么没“自动适应”

浏览器默认用 table-layout: auto，但它不是“内容越短列越窄、越长列越宽”的智能适配，而是逐列扫描所有单元格，找出每列中**不可换行的最长字符串**（比如一串无空格的 URL 或 UUID），并以此作为该列最小宽度。中文能断行所以常显得“正常”，但英文、日志 ID、base64 字符串会直接把整列撑爆。

常见错误现象：table 溢出父容器、小屏出现横向滚动条、td 文字跑出边界却不换行、给 th 写了 width: 100px 却完全不生效。

• width 在 auto 模式下只当 min-width 用，无法压缩已撑开的列
• 没设 table 的 width（如 width: 100%），表格就按内容总和撑开，不随父容器缩放
• word-break: break-all 或 word-wrap: break-word 必须加在 td/th 上，否则长文本仍拒绝换行

table-layout: fixed 才是可控自适应的起点

table-layout: fixed 不是让列“随内容缩放”，而是让你**先定规则、再填内容**——列宽由你控制，内容去适配。它快、稳定、可预测，但有三个硬性前提缺一不可：

• table 必须有明确的 width（width: 100% 或 width: 800px），否则退回到 auto 行为
• 列宽必须来自 <col> 元素，或第一行 <th>/<td> 的 HTML width 属性（注意：不是 CSS width）
• 后续所有行的 td 上写的 width 都会被忽略

示例结构：

Article To Html

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

下载

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

<table style="width: 100%; table-layout: fixed;">
  <col width="120">
  <col width="30%">
  <col width="*"> <!-- 无效，fixed 下不支持 * 或 auto -->
  <thead><tr><th>ID</th><th>Name</th><th>Remark</th></tr></thead>
  <tbody><tr><td>12345678901234567890</td><td>Alice</td><td>long remark text</td></tr></tbody>
</table>

为什么 <col> 是最稳的列宽控制方式

<col> 是专为列级样式设计的语义化元素，优先级高于任何单元格上的 CSS width 声明，且不依赖渲染顺序或内容是否加载完成。它必须放在 <table> 开始后、<thead> 之前，只支持 px、%、em 等绝对/相对单位，fr 和 auto 无效。

• 没写 <col> 的列，宽度由第一行对应 <th> 的 HTML width 属性决定（例如 <th width="200">）
• 混用 min-width/max-width 在 fixed 模式下常被跳过，不起作用
• 把 width 写在 td 的 style 里（如 style="width: 150px"）——浏览器根本不会读

小屏溢出和文字截断怎么处理

即使用了 table-layout: fixed + <col>，小屏仍可能横向溢出，因为列宽是刚性的。此时不能只靠 CSS 调整列宽，而要加一层容器兜底：

• 外层包裹一个 div，设 overflow-x: auto，让整表可水平滚动
• 对易撑开的列（如日志、URL）加 word-break: break-all，而不是仅靠 white-space: normal
• 若需截断显示省略号，必须同时设 white-space: nowrap + overflow: hidden + text-overflow: ellipsis，且该 td 需有明确宽度（来自 <col> 或第一行 width）

容易被忽略的一点：父容器本身没设 width 或含 overflow: hidden，表格看起来像“没生效”，其实只是被裁掉了。