table-layout: fixed 没效果的主因是缺三要素：表格未设显式 width、未用 或首行定义列宽、未控制文本溢出行为；浏览器仅切换模式却无布局依据。
table-layout: fixed 为什么加了没反应
加了 table-layout: fixed 却没效果，90% 是因为缺了三样东西：表格自身没设 width、没用 <col> 或第一行单元格声明列宽、也没控制文本溢出行为。浏览器只切换了布局模式，但没给它“按什么分”的依据。
-
table必须有显式width，比如width: 100%或width: 800px；父容器若为display: inline或未设宽的 flex 容器，百分比会失效 -
<col>必须是<table> 的直接子元素，且必须在 <code><thead> 之前——写进 <code><thead> 或 <code><tbody> 里等于白写 <li>只靠 <code><th width="120"> 不够稳妥：IE8–11 只认 HTML <code>width属性（非 CSS），现代浏览器虽两者都认，但混用易冲突 - 写了
table-layout: fixed却还在<td> 上加 <code>style="width: 100px"？这纯属冗余，fixed 模式下完全不读后续行的 width 声明怎么用
<col>真正控住每一列<col>是唯一语义正确、优先级最高、且不依赖渲染顺序的列宽定义方式。它不参与 DOM 渲染流程，只提供布局元信息。-
<col>支持px、%、em，但不支持fr或auto（width="auto"是合法 HTML 属性值，但仅限一列使用；多列设 auto 会让 fixed 失效） - 没设
width的<col>会均分剩余空间，不是按内容长度分配——例如三列：<col width="120"> <col> <col width="80">，中间列拿走所有剩余宽度 - 响应式场景下，用
@media控制<col>的width，比如小屏时把操作列设为width: 10%，文本列设为width: 90%；别用 JS 动态改style.width，触发重排成本高 - 列数动态生成时，JS 创建
<col>后必须appendChild到<table> 第一个子节点位置（即 <code><thead> 前），不能塞进任何表头或表体内部 <h3>文字撑破列宽、换行错乱怎么办</h3> <p><code>table-layout: fixed只管“列切多宽”，不管“字怎么放”。文本行为完全由你手动接管，否则长文本会溢出、换行异常、甚至把整行拉高。- 要截断显示省略号：
text-overflow: ellipsis必须配合white-space: nowrap+overflow: hidden+ 明确宽度（来自<col>），且父级不能有white-space: nowrap - 要自动换行：
word-break: break-word（推荐）或overflow-wrap: break-word；旧版 Safari/Firefox 建议两个都写 -
word-break: break-all适合 ID、哈希等字段，在任意字符间断（包括中文汉字之间），慎用于正文列 - 务必给
<td> 和 <code><th> 加 <code>vertical-align: top，否则多行文本上下错位，视觉上像列宽“跑偏”大数据量表格卡顿的真正瓶颈在哪
500 行 × 15 列的表格卡顿，核心不是 JS 慢，而是浏览器在
table-layout: auto下反复回流：逐行扫描所有<td> 内容（含未限制宽的图片、长文本、内联样式）来算列宽，单次主线程阻塞可达 150ms+。 <ul> <li>开启 <code>table-layout: fixed后，列宽计算退化为 O(1) —— 只看<col>或第一行，后续所有行直接按此分配空间 - 但光开 fixed 不够：若用
innerHTML = hugeTableString一次性插入 3000 行，HTML 解析器仍会假死；应改用DocumentFragment分批插入（如每 500 行一组），每批后加await new Promise(r => setTimeout(r, 0))让出主线程 - 虚拟滚动必须配合固定行高；否则编辑器里方向键移动焦点、双击编辑时，光标定位会错乱——因为浏览器无法准确测量动态高度行的 offsetTop
- 第三方 UI 库（如 Ant Design Table）常带 reset 规则覆盖
table-layout，需用!important或提高选择器权重（如.my-table table）确保生效，并在 DevTools 的 Styles 面板确认 computed 值确实是fixed
<col>、width、文本控制属性之间存在强依赖，漏掉任一环，性能收益就归零。 - 要截断显示省略号：
-
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
