table-layout: fixed 必须显式声明并配合定义列宽、documentfragment分批插入、固定行高虚拟滚动，缺一不可；否则千行表格编辑会卡顿崩溃。

table-layout: fixed 必须显式声明，不能靠继承或 reset.css

很多编辑器默认没开 table-layout: fixed，哪怕你写了 width: 100% 或给 <col> 设了宽，浏览器仍走 auto 模式——它会等整张表 DOM 解析完才开始布局，200 行 × 15 列的表格光列宽计算就能卡主线程 80ms+。

实操建议：

• 在编辑器容器的 <table> 标签上直接加内联 style：<code>style="table-layout: fixed; width: 100%;"，别只靠 CSS 类或外部样式表
• 避免被第三方 UI 库（如 Bootstrap Table、Ant Design Table）的 reset 规则覆盖：用 !important 强制，或提高选择器权重（如 .editor-table table）
• 检查 computed style，确认 table-layout 确实是 fixed，不是 auto —— DevTools 的 Styles 面板里搜不到就等于没生效

列宽必须由 定义， 或 的 width 属性无效

只设 table-layout: fixed 不够。浏览器在 fixed 模式下优先读 <col>，其次看第一行 <th> 的 <code>width，最后 fallback 到平均分配。但你在 <th> 或 <code><td> 上写 <code>width="120" 或 style="width: 120px"，它不参与列宽计算，纯属冗余，还可能干扰编辑器内部尺寸测量逻辑。

实操建议：

• 在 <table> 开头插入 <code><col> 标签，例如：<col style="width: 150px"> <col style="width: 80px"> <col style="width: auto">（注意：仅一列可设 auto，多列会导致 fixed 失效）
• 如果列数动态，用 JS 批量生成 <col> 并 append 到 <table> 第一个子节点位置，别塞进 <code><thead> 里 <li>响应式场景下，用 <code>@media 控制 <col> 的 width，比如小屏时把文本列设为 width: 30%，操作列设为 width: 10%

避免 innerHTML 一次性写入大表格，改用 DocumentFragment + 分批插入

编辑器加载 3000 行数据时，若直接 el.innerHTML = hugeTableString，浏览器要解析整个字符串、构建全部 DOM 节点、触发多次 layout，页面瞬间假死。这不是 JS 慢，是 HTML 解析器和渲染引擎被压垮了。


html-deploy
使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。
下载

实操建议：

• 把每 500 行 <tr> 组成一个 <code>DocumentFragment，再 append 到 <tbody>；比拼接字符串 + innerHTML 更可控 <li>每批插入后加 <code>await new Promise(r => setTimeout(r, 0))，让出主线程，保持编辑器输入框、滚动条响应不卡顿
• 禁用 jQuery 的 .html() 或原生 .insertAdjacentHTML() 批量写入——它们底层仍是字符串解析，没解决重排问题

虚拟滚动必须配合固定行高，否则编辑器光标定位会错乱

编辑器里用户要双击单元格编辑、按方向键移动焦点。如果用虚拟滚动但没设固定行高，滚动时 scrollTop 和实际 DOM 位置对不上，光标会跳到错误行，甚至触发 focus 丢失。

实操建议：

• 所有 <tr> 必须有统一 <code>height（如 style="height: 36px"），或通过 line-height + padding 精确控制内容高度
• 别信“动态高度缓存”：编辑器里用户随时可能展开/折叠单元格内容、切换字体大小，缓存极易失效；宁可牺牲一点空间精度，也要保行高稳定
• 用 virtuoso 这类库时，传入 defaultItemHeight: 36，并确保编辑器所有 <td> 内部不出现 <code>min-height、flex 或 display: grid 等破坏行高一致性的布局 固定列宽、分批插入、虚拟滚动这三步缺一不可。少一步，编辑器在千行表格里打字就会卡顿，光标跳动，甚至崩溃。尤其注意 <col> 必须存在且有效——这是 fixed 模式真正起效的开关，不是装饰。

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