table-layout: fixed 必须显式声明在<table>上，否则无效；列宽只能用<col>定义，内容溢出需按需设置截断或换行，大数据量需分批插入DOM。
table-layout: fixed 必须显式声明在 <table> 上
不写就等于没开。浏览器默认是 table-layout: auto，哪怕你写了 width: 100% 或给 <th> 设了 style="width: 120px"，它照样逐行扫描所有单元格内容来算列宽——500 行 × 15 列的表格，光这一项就能卡主线程 100ms+。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 直接在
<table>标签上加内联样式：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> 或 <td> 上的 width 属性、style.width、min-width 全都不参与 table-layout: fixed 的列宽计算，纯属干扰，还可能让编辑器内部尺寸测量错乱。
实操建议：
立即学习“前端免费学习笔记（深入）”；
-
<col>必须放在<table>开头、<thead>之前，例如：<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>和<th>设置vertical-align: top，否则多行文本上下错位
大数据量渲染不能只靠 CSS
即使开了 table-layout: fixed，一次性用 innerHTML = hugeString 渲染 3000 行，浏览器仍会在 DOM 构建阶段假死——这不是 JS 慢，是 HTML 解析器和渲染引擎被压垮。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 用
DocumentFragment批量构建，每 500–1000 行组成一个 fragment，再appendChild到<tbody> - 每批插入后加
await new Promise(r => setTimeout(r, 0))，让出主线程，保持滚动和输入响应 - 服务端返回 JSON，前端控制节奏；禁用 jQuery
.html()或原生innerHTML直接塞字符串
固定列宽只是起点，<col> 定义、内容截断策略、DOM 插入节奏这三者缺一不可。漏掉任意一个，表格要么变形，要么卡顿，要么文字堆成一团。
