width="100%"或style="width:100%"失效的三大前提是：父容器无明确宽度、未启用table-layout:fixed、标签位置错误。

直接写 width="100%" 或 style="width: 100%" 几乎一定失效——不是代码没写对，而是缺了三个硬性前提：父容器无明确宽度、table-layout: fixed 没启用、<col> 没放对位置。

父容器必须有可计算宽度

浏览器算 100% 需要参照物。如果表格外层是裸 <div>，且没设 <code>width、max-width 或 flex/grid 约束，那它的宽度就是 auto，width: 100% 就退化为内容自适应。

• 最简验证：给直接父元素加 style="width: 100%"，再看表格是否撑开
• 根级兜底方案：html, body { margin: 0; padding: 0; width: 100%; height: 100% }
• 框架中（如 React）注意：组件默认不占满，需显式传 style={{ width: '100%' }} 或用 class
• 别用 width: 100vw：滚动条存在时会超出视口，触发横向滚动

必须同时设置 table-layout: fixed 和 width: 100%

table-layout: auto（默认）会让浏览器等所有内容加载完再算列宽，小屏下一条长 URL 就能撑爆整列；fixed 则提前锁定列宽逻辑，只看第一行或 <col>，渲染快且可控。

• 二者必须共存：style="width: 100%; table-layout: fixed"，缺一不可
• <th> 上的 <code>width 属性在 auto 模式下会被忽略，别白费劲
• IE8+ 支持该属性，但 Outlook（用 Word 渲染引擎）不支持，邮件模板慎用

<col> 必须紧接 <table> 后、<code><thead> 前 <p><code><col> 是唯一语义正确、时机可靠的列宽控制方式，优先级高于任何单元格上的 width 声明，且不依赖首行是否渲染完成。



Article To Html

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

下载

• 位置错就无效：不能塞进 <thead>、<code><tbody> 或 <code><tr> 里 <li>单位只支持 <code>px、%、em，不支持 fr 或 calc()
• 混合使用没问题：<col width="120"> <col width="60%">，剩余空间由百分比列按比例分
• 没写 <col> 的列，会 fallback 到第一行对应 <th> 的 <code>width；都没写，就坍缩成最小内容宽（常导致列过窄）

  内容溢出必须手动处理，width 不是万能锁

  即使列宽设死，长文本、URL、连续英文、未缩放图片仍会破坏视觉表现：要么撑破列宽，要么溢出容器外不可见。

  • 单行截断：white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  • 允许换行（推荐）：white-space: normal; word-break: break-word; 或 overflow-wrap: break-word;
  • 图片强制适配：img { max-width: 100%; height: auto; display: block; }，且务必删掉 <img> 标签上的 width 和 height 属性
  • 边框影响总宽：加 box-sizing: border-box; 让 width: 100% 包含边框和 padding

  最容易被跳过的不是怎么写 width，而是忘了检查父容器有没有宽度、table-layout 漏没设、以及 <col> 放错了位置——这三个点卡住，后面所有样式都白调。