table-layout: fixed 必须配合 table 显式 width 和 元素（或首行单元格 width）才能生效，仅设 fixed 无效； 必须为 table 直接子元素，优先级最高，且需手动控制内容换行与溢出。
table-layout: fixed 必须显式设置且带 width 才生效
只写 table-layout: fixed 不管用，浏览器会悄悄 fallback 回 auto 模式。几乎所有浏览器都要求 <table> 同时声明宽度（比如 <code>width: 100% 或具体像素值），否则列轨道压根建不起来。
- 最稳妥是内联写：
style="table-layout: fixed; width: 100%;"，避免被 reset.css 或 UI 库样式覆盖 - 用
!important或高权重选择器（如.data-table table）确保生效 - 在 Chrome DevTools 的 Computed 面板里搜
table-layout，确认值真是fixed，不是auto—— 搜不到就等于没开
列宽必须由 /
上的 width 属性无效
<col> 是唯一能真正参与 fixed 列宽计算的元素，它必须是 <table> 的直接子节点，不能塞进 <code><thead> 里。第一行 <code><th> 的 <code>width 属性虽有 fallback 效果，但优先级低、易冲突，且不支持响应式。
- 正确写法：
<col width="150">
<col width="25%">
<col width="auto">（注意：仅一列可设 auto）
- 禁用
<th width="150"> 或 <code>style="width: 150px" —— 这些在 fixed 模式下不参与计算，纯属干扰编辑器尺寸测量
- SSR 渲染后 JS 动态插入
<col> 无效：样式已计算完毕，必须在 DOM 构建前就存在
内容溢出和换行要单独控制，table-layout 不管这个
table-layout: fixed 只锁定列宽，单元格内部文字是否换行、截断、撑高，全靠你手动配 CSS。否则列宽固定了，但单元格高度乱跳，表格视觉上还是“崩”的。
- 单行截断必备四件套：
white-space: nowrap + overflow: hidden + text-overflow: ellipsis + 显式宽度（<col> 已提供）
- 多行内容慎用
word-break: break-all（中文会断字），优先用 overflow-wrap: break-word
- 备注类长文本列建议设
vertical-align: top，比默认居中更稳，避免光标定位错位
超过 200 行必须搭配虚拟滚动，否则 fixed 也救不了
哪怕开了 table-layout: fixed 并配好 <col>，DOM 节点太多照样卡。浏览器仍要解析、布局、绘制所有 <tr>，主线程照卡不误。
<ul>
<li>真实项目中，200 行是硬分界线：再往上必须用 <code>virtuoso 或 react-window 类库做虚拟滚动
- 虚拟滚动的前提是预设行高（或缓存动态高度），否则滚动偏移算不准，光标和编辑框会错位
- 禁用
will-change: transform 在表格容器上——现代浏览器对表格内部元素加这个，反而触发强制图层提升，吃内存
实际项目里最容易被忽略的是：开了 fixed 却没配 <col>，或者把 <col> 插错了位置；还有就是以为列宽固定了就万事大吉，结果单元格里一段无空格长字符串直接把整行撑高，破坏对齐。这些细节不抠清楚，性能优化就只是纸面功夫。
<col> 是唯一能真正参与 fixed 列宽计算的元素，它必须是 <table> 的直接子节点，不能塞进 <code><thead> 里。第一行 <code><th> 的 <code>width 属性虽有 fallback 效果，但优先级低、易冲突，且不支持响应式。
- 正确写法：
<col width="150"> <col width="25%"> <col width="auto">（注意：仅一列可设auto） - 禁用
<th width="150"> 或 <code>style="width: 150px"—— 这些在fixed模式下不参与计算，纯属干扰编辑器尺寸测量 - SSR 渲染后 JS 动态插入
<col>无效：样式已计算完毕，必须在 DOM 构建前就存在 - 单行截断必备四件套：
white-space: nowrap+overflow: hidden+text-overflow: ellipsis+ 显式宽度（<col>已提供） - 多行内容慎用
word-break: break-all（中文会断字），优先用overflow-wrap: break-word - 备注类长文本列建议设
vertical-align: top，比默认居中更稳，避免光标定位错位 - 虚拟滚动的前提是预设行高（或缓存动态高度），否则滚动偏移算不准，光标和编辑框会错位
- 禁用
will-change: transform在表格容器上——现代浏览器对表格内部元素加这个，反而触发强制图层提升，吃内存
内容溢出和换行要单独控制，table-layout 不管这个
table-layout: fixed 只锁定列宽，单元格内部文字是否换行、截断、撑高，全靠你手动配 CSS。否则列宽固定了，但单元格高度乱跳，表格视觉上还是“崩”的。
超过 200 行必须搭配虚拟滚动，否则 fixed 也救不了
哪怕开了 table-layout: fixed 并配好 <col>，DOM 节点太多照样卡。浏览器仍要解析、布局、绘制所有 <tr>，主线程照卡不误。
<ul>
<li>真实项目中，200 行是硬分界线：再往上必须用 <code>virtuoso 或 react-window 类库做虚拟滚动
fixed 却没配 <col>，或者把 <col> 插错了位置；还有就是以为列宽固定了就万事大吉，结果单元格里一段无空格长字符串直接把整行撑高，破坏对齐。这些细节不抠清楚，性能优化就只是纸面功夫。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
