table-layout: fixed 是最可控的列宽自适应方案，因其列宽由表格总宽及 或第一行单元格的 width 决定，但需确保 有明确宽度、避免 min/max-width 干扰、优先使用 定义列宽，并配合外层 overflow-x: auto 应对小屏溢出。
直接用 table-layout: fixed 配合 <col> 是目前最可控、最可预测的列宽自适应方案；靠 width 写在 <td> 或第一行 <code><th> 上，多数时候会失效。<h3>为什么 <code>table-layout: fixed 加 width 在 <td> 上没反应<p>fixed 模式下，浏览器只读取第一行单元格（或 <code><col>）的 width 声明，后续所有 <td> 上的 <code>width 都被忽略。更关键的是：如果 <table> 本身没设 <code>width，哪怕你给每列都写了 width: 20%，浏览器也会按内容最小宽度撑开——结果就是列宽全坍缩。
<table> 必须有明确的 <code>width（如width: 100%或width: 800px）- 列宽声明必须落在
<col>元素上，或第一行的<th>/<code><td> 中<li>避免混用 <code>min-width、max-width，它们在 fixed 下常被跳过 - 父容器若没设
width或含overflow: hidden，表格可能被裁剪，看起来像“没生效” -
<col>必须放在<table> 开始后、<code><thead> 之前<li>只支持 <code>%、px、em等单位，fr不可用 - 没写
<col>的列，宽度由第一行对应单元格的width决定 - 示例：
A B C - 外层加
<div style="overflow-x: auto;">，保证滚动可用<li>小屏媒体查询中可临时切回 <code>table-layout: auto+white-space: nowrap防折行干扰 - 留一列用
width: 100%（前提是其他列宽度明确），它会自动填满剩余空间 - 慎用
word-break: break-all，破坏可读性；优先考虑text-overflow: ellipsis+white-space: nowrap+overflow: hidden
用 <col> 定义列宽才是稳定解法
<col> 是专为列级宽度控制设计的语义化元素，优先级高于任何单元格上的 width 声明，且不依赖内容渲染顺序。
小屏下横向溢出怎么处理
纯 table-layout: fixed 在窄屏上极易溢出，不能只靠 CSS 收缩解决。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
真正难的不是写对那几行 CSS，而是决定哪列允许截断、哪列必须可见、是否接受横向滚动——这些权衡没法靠一个属性自动完成。
