table-layout: fixed 必须配合 table 的显式宽度、 或首行单元格的宽度声明，以及文本溢出控制——缺一不可，否则列宽照样被内容撑开；浏览器只按三级优先级（ > 首行 width > 均分）确定列宽，任一环节缺失即退化为均分，导致失效。

直接说结论：table-layout: fixed 必须配合 table 的显式宽度、<col> 或首行单元格的宽度声明，以及文本溢出控制——缺一不可，否则列宽照样被内容撑开。

为什么写了 table-layout: fixed 还是不固定？

浏览器只认“预设宽度来源”，不是加了属性就自动生效。它按三级优先级找列宽依据：<col> > 第一行 <th>/<code><td> 的 <code>width（HTML 属性或内联 style）> 均分剩余空间。如果这三样全没提供，它就退回到均分 100%，而均分结果受内容长度影响极大，尤其小屏下容易崩。

• <col width="120"> 是 HTML5 废弃写法，现代浏览器静默忽略，必须改用 <col style="width: 120px">
• <colgroup></colgroup> 必须是 <table> 的直接子元素，不能套在 <code><div> 或其他标签里 <li>如果表格嵌套在响应式容器中，<code>width: 100% 比 width: 800px 更安全；但若父容器宽度未定，百分比会失效

怎么用 <col> 精确控制每列宽度？

<col> 本身只是占位，真正起作用的是它和 table-layout: fixed 的组合。每列需一个独立 <col>，span 不会让多列继承同一宽度。


Doc To HTML
使用 MinerU 文档处理引擎将 Word 文档（.doc、.docx）转换为保留结构和格式的干净 HTML。
下载
• 要让三列分别宽 120px / 20% / 自动填充，就得写三个 <col>：<col style="width: 120px"> <col style="width: 20%"> <col>
• 动态生成列（如后端返回字段列表）时，不能手写 <col>，得用 JS 插入对应数量的 <col> 元素，否则最后一列没样式
• 未设宽度的 <col> 会均分剩余空间，不是按内容长度分配

内容过长时怎么防止撑破单元格？

text-overflow: ellipsis 在 table 单元格里生效有硬性前提：该单元格必须有明确宽度（来自 <col> 或 width）、display 为 table-cell（默认）、且父级没设 white-space: nowrap。

• 单行截断推荐组合：overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
• 多行换行用：word-break: break-word; 或 overflow-wrap: break-word;（注意：word-break: break-all 会在任意位置断词，慎用）
• 务必给 <td> 和 <code><th> 加 <code>vertical-align: top，否则多行文本可能上下错位
• 边框和 padding 会影响实际占用空间，建议统一加 box-sizing: border-box;

最容易被忽略的点是：列数必须和 <col> 数量严格一致；表格宽度必须显式设置；文本控制样式必须落到具体单元格上——这三处任一缺失，都会导致“看起来设了却没用”。