table width="100%"不生效主因是父容器无明确宽度或未设table-layout: fixed；col标签必须为table直接子元素且带width样式，否则列宽失控。

table width="100%" 为什么经常不生效

因为浏览器不会凭空算出“100%”是多宽——width="100%" 或 style="width: 100%" 必须有明确参照物。如果父容器（比如 <div>）没设宽度，这个百分比就退化为 <code>auto；更常见的是漏了 table-layout: fixed，导致表格仍按内容撑开，视觉上“宽了”，但列宽乱飘、溢出或坍缩。

必须同时设置的两个硬性条件

想让表格真正占满父容器，这两个 CSS 声明缺一不可：

• width: 100%（或具体像素值，如 width: 800px）
• table-layout: fixed

只写其中一个，<col> 宽度定义、文本截断等后续控制都会失效。注意：table-layout: fixed 不是“让表格变宽”的指令，它只是切换列宽计算模式——没有 width，它根本不知道怎么分。

标签必须放对位置且带 width

<col> 是唯一能稳定控制列宽的语义化方式，但它极其挑剔：

Article To Html

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

下载

• 必须是 <table> 的**直接子元素**，且紧接在 <code><table> 开始标签后、<code><thead> 之前 <li>每个 <code><col> 对应一列，数量必须和实际列数一致
• 必须用 style="width: 120px" 或 style="width: 25%" 写法，<col width="120"> 这种旧写法现代浏览器已静默忽略
• 没写 width 的 <col>，浏览器会 fallback 到均分 100%，结果还是随内容波动

错误示例：<thead><col style="width: 100px"></thead> —— 放错位置，完全无效。

内容溢出时，white-space 和 overflow 必须配对使用

table-layout: fixed 锁定了列宽，但长文本、URL、连续无空格英文仍会撑破单元格。单靠 width 没用，得加行为控制：

• 单行截断：white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
• 自动换行：word-break: break-word; white-space: normal;
• 图片破坏列宽：img { max-width: 100%; height: auto; }
• 边框影响总宽：box-sizing: border-box; 让 width: 100% 包含 padding 和 border

最容易被忽略的不是怎么写 width，而是忘了父容器有没有宽度、table-layout 没设、以及 <col> 放错了位置——这三个点，截至 2026 年 10 月，仍是线上表格布局失效的最高频原因。