table-layout: fixed 必须显式声明在上，否则无效；列宽只能用定义，内容溢出需按需设置截断或换行，大数据量需分批插入dom。

table-layout: fixed 必须显式声明在 <table> 上 <p>不写就等于没开。浏览器默认是 <code>table-layout: auto，哪怕你写了 width: 100% 或给 <th> 设了 <code>style="width: 120px"，它照样逐行扫描所有单元格内容来算列宽——500 行 × 15 列的表格，光这一项就能卡主线程 100ms+。

实操建议：

Doc To HTML

使用 MinerU 文档处理引擎将 Word 文档（.doc、.docx）转换为保留结构和格式的干净 HTML。

下载

• 直接在 <table> 标签上加内联样式：<code>style="table-layout: fixed; width: 100%;"，别只靠 CSS 类或外部样式表
• 用 DevTools 的 Styles 面板确认 computed style 里 table-layout 确实是 fixed，不是 auto
• 第三方 UI 库（如 Ant Design Table）可能重置该属性，必要时用 !important 或提高选择器权重，例如 .my-table table

<col> 是唯一靠谱的列宽定义方式

<th> 或 <code><td> 上的 <code>width 属性、style.width、min-width 全都不参与 table-layout: fixed 的列宽计算，纯属干扰，还可能让编辑器内部尺寸测量错乱。

实操建议：

• <col> 必须放在 <table> 开头、<code><thead> 之前，例如：<code><col style="width: 150px"> <col style="width: 80px"> <col style="width: auto">
• 仅一列可设 width: auto，多列会导致 fixed 失效；动态列数时，用 JS 在插入数据前批量生成并插入 <col> 节点
• 响应式场景下，用 @media 控制 <col> 的 width，比如小屏时文本列设为 width: 30%，操作列设为 width: 10%

内容溢出必须分情况处理

table-layout: fixed 下，长文本不会自动换行，要么撑破单元格，要么截断失效——因为 text-overflow: ellipsis 生效的前提是：单元格有明确宽度、display: table-cell（默认）、且父级没设 white-space: nowrap。

实操建议：

• 需要截断的列（如 ID、状态码）：加 overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
• 需要换行的列（如备注、描述）：加 word-break: break-word; 或 overflow-wrap: break-word;
• 务必给 <td> 和 <code><th> 设置 <code>vertical-align: top，否则多行文本上下错位

  大数据量渲染不能只靠 CSS

  即使开了 table-layout: fixed，一次性用 innerHTML = hugeString 渲染 3000 行，浏览器仍会在 DOM 构建阶段假死——这不是 JS 慢，是 HTML 解析器和渲染引擎被压垮。

  实操建议：

  • 用 DocumentFragment 批量构建，每 500–1000 行组成一个 fragment，再 appendChild 到 <tbody> <li>每批插入后加 <code>await new Promise(r => setTimeout(r, 0))，让出主线程，保持滚动和输入响应
  • 服务端返回 JSON，前端控制节奏；禁用 jQuery .html() 或原生 innerHTML 直接塞字符串

  固定列宽只是起点，<col> 定义、内容截断策略、DOM 插入节奏这三者缺一不可。漏掉任意一个，表格要么变形，要么卡顿，要么文字堆成一团。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！