通过 CSS position: fixed 结合合理定位，可使表格中某列（如首列“left data”）的文字脱离文档流、悬浮于滚动区域之上，实现无论表格如何垂直滚动都持续可见的效果。
通过 css `position: fixed` 结合合理定位，可使表格中某列（如首列“left data”）的文字脱离文档流、悬浮于滚动区域之上，实现无论表格如何垂直滚动都持续可见的效果。
在处理长表格（尤其是含 rowspan 合并单元格的复杂布局）时，常规的
✅ 正确解法是：将需常驻显示的文本包裹为独立定位元素，并使用 position: fixed 实现视觉锚定。
✅ 实施步骤
-
语义化包裹内容
将目标单元格内的文本用 包裹，并添加专属类名（如 fixed-column），确保样式隔离与可维护性：
<tr id="myTr"> <td><span class="fixed-column">left data</span></td> <td>right data</td> </tr>
-
应用精准定位样式
关键在于：fixed 定位需相对于视口，因此必须结合 top/left 及容器偏移计算，确保文字始终对齐原列位置。以下为推荐方案（适配您当前 .container 的 500px 高度及表头 sticky 行为）：
.fixed-column {
position: fixed;
top: 50%;
left: 20px; /* 根据实际左侧边距调整（如 container padding + table margin + 左侧 border/padding）*/
transform: translateY(-50%);
background-color: lightsteelblue; /* 与原单元格背景一致，避免透底 */
padding: 10px;
border: 1px solid black;
white-space: nowrap;
z-index: 10;
font-size: 14px;
}? 为什么用 top: 50% + transform: translateY(-50%)？
精确垂直居中，避免因字体行高差异导致错位；left: 20px 需根据真实 DOM 结构测量（建议用浏览器开发者工具检查 .container 左侧到表格第一列左边缘的距离）。
-
增强健壮性（可选但推荐）
- 添加 z-index: 10 确保覆盖滚动内容；
- 设置 white-space: nowrap 防止长文本换行破坏布局；
- 若表格存在水平滚动，还需监听 scrollLeft 并动态更新 left 值（见下方进阶示例）。
⚠️ 注意事项与限制
- position: fixed 会使元素脱离表格流，不再参与表格自动宽度计算，因此务必手动设置 padding/border 以匹配原
视觉效果； - 当页面缩放（zoom）或响应式断点变化时，需测试 left 偏移值是否仍准确；
- 若需支持多行固定列（如前两列均需常驻），应为每列分配独立类名（如 fixed-col-1, fixed-col-2）并分别配置 left 值；
- 不适用于打印样式（@media print），导出 PDF 时该元素将消失，如需打印兼容，请改用服务端渲染或另作适配。
? 进阶：支持水平滚动的动态定位（JavaScript 辅助）
当表格同时支持横向滚动时，仅靠 CSS 无法响应 scrollLeft。可添加轻量脚本同步偏移：
const container = document.querySelector('.container'); const fixedSpan = document.querySelector('.fixed-column'); container.addEventListener('scroll', () => { fixedSpan.style.left = `${20 + container.scrollLeft}px`; });? 提示：将 20 替换为实际基准偏移量（即未滚动时 left data 左侧距容器左侧的距离）。
综上，该方案以最小侵入性达成核心需求——让关键列信息“浮”在滚动之上，兼顾可访问性、性能与可维护性。它不依赖框架，纯原生 CSS/JS 即可实现，是复杂表格固定列场景下的成熟实践模式。
