table-layout: fixed 是实现表格列宽可控的唯一可靠方案，需配合 width: 100%、<col>元素（紧接<table>后）、显式列宽设置及word-break/white-space等溢出控制样式，缺一不可。

table-layout: auto 是浏览器默认行为，但它根本不是“自动适应你想要的样子”，而是“自动扫描所有内容后强行撑开列宽”。直接写 width="100%" 或只设 table-layout: auto，90% 的情况都会导致表格溢出、错位或移动端横向滚动。

为什么 table-layout: auto 常常不如预期

它会让浏览器逐列遍历所有单元格（包括隐藏行、动态插入行），取每列中内容的最大自然宽度作为基准。一个没换行的 URL、一段连续英文、一张未约束的图片，就能把整列拉宽，拖垮整个表格。

• 即使父容器写了 max-width: 600px，auto 仍优先满足内容宽度，不触发截断
• <th width="20%"> 在 <code>auto 模式下完全被忽略——不是写错了，是浏览器压根不读
• 首行和后续行列宽可能不一致，尤其用了 colspan 后，表头和数据列容易错位
• 渲染慢：数据量大时，浏览器要等全部 DOM 加载完才开始算列宽

怎么让 table-layout: auto 真正“可控地自适应”

不是放弃 auto，而是用 CSS 主动干预内容渲染行为，让它在“内容驱动”的前提下尽量不破相：


Wechat Article Html
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
下载
• 给需要紧贴内容的列加 white-space: nowrap（比如操作列、状态标签），防止换行压缩列宽
• 给长文本列加 word-break: break-word 或 overflow-wrap: break-word，配合 white-space: normal
• 图片必须加 img { max-width: 100%; height: auto; display: block; }，且删掉 <img alt="如何使用HTML设置自动表格布局" > 标签上的 width 和 height 属性
• 避免在 thead 中对多列 colspan，除非所有被合并列已有明确宽度

更推荐：用 table-layout: fixed 替代“幻想中的 auto”

所谓“自动布局”，真正可落地的方案其实是 fixed + <col> —— 它不是靠内容猜，而是你定规则、浏览器执行：

• <table> 必须同时有 <code>width: 100%（或固定值）和 table-layout: fixed
• <col> 必须是 <table> 的**直接子元素**，且紧接在 <code><table> 开始标签后、<code><thead> 前 <li>支持混合单位：<code><col width="120"> <col width="30%"> 合法；但 fr、calc() 无效
• 没写 <col> 的列，会 fallback 到第一行对应 <th> 的 <code>width；都没写，就坍缩成最小内容宽（常导致列过窄）

  最容易被跳过的三个硬性条件

  不是代码写得不够多，而是这三个点漏一个，width: 100% 和 table-layout: fixed 就形同虚设：

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

  • 父容器没有可计算宽度（比如裸 <div> 没设 <code>width、max-width 或 flex/grid 约束）
  • <col> 放错了位置（塞进 <thead> 或 <code><tbody> 里） <li>忘了处理内容溢出：列宽锁死了，但长文本、URL、图片仍会撑破或溢出不可见</li> </tbody>