用 overflow 实现横纵双滚动需外层容器设固定宽高+overflow:auto，表格设 min-width:max-content 且单元格 white-space:nowrap；sticky 锁头需父容器无 overflow 截断；大数据量需虚拟滚动或 contain:strict；导出时需临时展开或服务端渲染。
用 overflow 实现横纵双滚动，但别直接套在表格上
纯 CSS 做二维滚动对比图，核心就是让容器同时支持横向和纵向滚动。但直接给 <table> 外层加 overflow: auto 很容易失效——因为表格默认会撑宽容器，横向滚动根本触发不了。
关键做法是切断表格的自动宽度继承：
- 给外层容器设固定宽高 +
overflow: auto - 给
<table>设min-width: max-content（不是width: 100%） - 所有
<th>/<td>加white-space: nowrap防止换行压缩列宽
否则你会看到：滚动条只出一个方向、内容被截断、列宽忽大忽小——全是表格默认布局惹的祸。
position: sticky 锁住行列头，但 IE 和 Safari 旧版不认
对比图里行列标题必须常驻可视区，position: sticky 是最轻量解法。但它对父容器有隐性要求：不能有 overflow: hidden|auto，也不能是 transform 或 filter 触发的层叠上下文。
立即学习“前端免费学习笔记（深入）”；
常见翻车点：
- 把 sticky 的
<th>放在带overflow: auto的 div 里 → 完全不生效 - 用 Flex/Grid 布局包裹表格 → sticky 在部分 Safari 版本下失效
- 没设
top或left值 → 行为不可预测
稳妥写法：th:first-child { position: sticky; left: 0; background: white; }，且确保它的父元素是 <tr>，再往上不能有 overflow 截断。
数据量大时，CSS 滚动卡顿，得靠虚拟滚动兜底
当行数超 500、列数超 30，纯 CSS 滚动会明显掉帧——浏览器要持续重绘整个表格 DOM，哪怕只滚一像素。这时候 CSS 已经不是瓶颈，是 DOM 量级问题。
真实可行的缓解手段：
- 用
contain: strict给滚动容器加渲染隔离（Chrome 85+、Firefox 90+ 支持） - 把非可视区的
<tr>设为display: none（需 JS 配合 scroll 事件） - 放弃原生表格，改用
<div>+ Grid 布局 +grid-template-columns控制列宽，更利于虚拟化
注意：transform: translate() 模拟滚动虽快，但会破坏原生滚动条语义和键盘导航（如空格键翻页），别为了性能牺牲可访问性。
导出为图片或 PDF 时，滚动区域内容丢失
浏览器打印或 html2canvas 截图时，只捕获当前可视区域。横向滚动的内容、sticky 锁定的列头都可能错位甚至消失。
能用的对策很有限：
- 导出前用 JS 临时展开全部列：移除容器
overflow，设table { width: fit-content }，再截图 - 用
dom-to-image替代html2canvas，它对 transform 和 sticky 支持更好 - PDF 导出优先走服务端（如 Puppeteer），前端纯 CSS 方案基本不可靠
别指望加个 @media print { overflow: visible } 就能解决——打印样式对滚动容器的处理极其保守，多数情况直接忽略。
二维滚动对比图看着简单，实际卡点全在边界行为：滚动触发条件、sticky 生效范围、虚拟化时机、导出截断逻辑。每个环节稍不注意，用户一拉就崩。
