“按需分屏”是具备冻结首行/首列、可拖拽分隔线、滚动同步等交互能力的二维滚动容器，需 DOM 操作+事件监听+样式隔离实现，纯 CSS 无法完成。
表格内容“按需分屏”不是指把一张表切成左右两半，而是让表格自身具备类似分屏编辑器的交互能力：左侧固定列（如ID、操作）、右侧滚动数据列，同时支持横向拖拽调整分隔线、冻结首行、响应式回退。这本质上是「带交互控制的二维滚动容器」，纯 CSS 无法完成，必须组合 DOM 操作 + 事件监听 + 样式隔离。
用 position: sticky 冻结首行和首列但有硬性前提
很多人试过给 thead th 加 position: sticky; top: 0，发现无效——常见原因是父级容器没设高度或触发了层叠上下文。
-
table或其直接包裹容器（如div.table-wrapper）必须有明确高度，例如max-height: 600px或min-height: 50vh；只写height: 100%不够，因为百分比高度依赖父级，而body默认无高度 - 首列冻结要加
left: 0，但必须确保该列在tbody中对应列的th或td也设了position: sticky，且所有冻结列宽度总和不能超过容器宽度，否则会重叠 - 避免在冻结区域父级上使用
transform、will-change、overflow: hidden，这些会创建新层叠上下文，导致sticky失效 - iOS Safari 对多方向 sticky 支持不稳定（尤其
left+top同时生效），建议降级方案：用两个独立table（一个只含首行首列，另一个含主体），通过 JS 同步滚动位置
实现可拖拽分隔线需监听 mousemove 而非 resize
浏览器原生 window.onresize 只响应窗口大小变化，抓不到用户拖动分屏边线的实时动作。真要拖拽调整左右比例，得靠 mousedown → mousemove → mouseup 这套流程。
- 拖拽元素（如一个
div.resize-handle）必须设user-select: none，否则鼠标划过文字时会触发文本选中，打断拖拽 - 计算偏移量要用
event.clientX减去初始点击位置，而不是直接读取offsetLeft，后者受父级transform影响不准确 - 更新宽度时，用
requestAnimationFrame包裹对grid-template-columns的修改，避免连续触发 layout thrashing - 边界限制必须做：最小左栏宽度建议 ≥ 120px（保证文字可读），最大不超过容器宽的 70%，否则右栏失去意义
表格分屏后内容溢出和滚动行为容易失控
分屏常伴随横向滚动，但默认 overflow-x: auto 会把滚动条压在表格底部，遮挡最后一行数据，且移动端体验极差。
立即学习“前端免费学习笔记（深入）”；
- 不要给
table直接设overflow—— 表格本身不支持该属性。正确做法是用外层div.table-container包裹，并设overflow-x: auto - 冻结列区域（左栏）和滚动区域（右栏）必须用不同容器分离，否则
sticky和overflow冲突。典型结构：<div class="split-table"> <div class="frozen-col"></div> <div class="scrollable-col"></div> </div> - 移动端慎用横向滚动：小屏下优先用媒体查询切换为单列堆叠（
flex-direction: column），或提供“展开详情”按钮替代横向滑动 - 滚动同步问题：当用户拖动右栏滚动条时，左栏应同步滚动。监听
scroll事件并设置frozenCol.scrollTop = scrollableCol.scrollTop，但注意防抖，避免频繁触发
服务端分页与前端分屏共存时的数据映射容易错位
如果表格本身已是服务端分页（如每页 50 条），又叠加了左右分屏（左栏固定 3 列，右栏动态列），那么「当前页数据」和「分屏列结构」必须解耦管理，否则翻页后列宽重置、拖拽状态丢失。
- 分屏状态（如左栏宽度、是否冻结）应存在内存变量或
localStorage中，翻页时不重置；而表格数据只负责刷新tbody内容 - 列宽不能靠
table-layout: fixed+width硬编码，否则响应式失效。推荐用grid-template-columns动态生成，每次渲染后根据实际列数重新计算 - 服务端返回字段顺序必须稳定，前端不能假设第 0 列永远是 ID —— 应通过字段名（如
data-field="id"）绑定列配置，而非数组索引 - 翻页后若需保持滚动位置，别用
window.scrollTo，而是直接设置scrollableCol.scrollTop = 0，更精准且不触发页面跳动
真正难的不是写出第一版分屏表格，而是让冻结、拖拽、分页、响应式四者互不干扰。多数崩溃点藏在事件监听未清理、样式继承链断裂、或移动端 touch 事件未适配上——这些细节不处理，用户一上手就卡住。
