如何修复固定列表格中边框透明或错位的问题

在实现带有固定列的 HTML 表格（如 Svelte 中）时，若启用 border-collapse: collapse，滚动过程中固定单元格的边框可能显示为透明或随滚动偏移；将 border-collapse 改为 initial（即 separate）可彻底解决该渲染异常。

在实现带有固定列的 html 表格（如 svelte 中）时，若启用 `border-collapse: collapse`，滚动过程中固定单元格的边框可能显示为透明或随滚动偏移；将 `border-collapse` 改为 `initial`（即 `separate`）可彻底解决该渲染异常。

这是一个在构建可滚动、带固定列（sticky columns）的表格组件时容易被忽视但影响显著的 CSS 渲染问题。根本原因在于 border-collapse: collapse 与 position: sticky 的交互存在浏览器渲染兼容性缺陷：当表格处于折叠边框模式时，浏览器在合成 sticky 元素图层时可能错误地裁剪、忽略或错位渲染 border，导致视觉上“边框消失”（实为被遮挡或未正确重绘），甚至出现边框随滚动条滑动的诡异现象。

正确解决方案非常简洁：

table {  border-collapse: separate; /* 关键修复：替换 collapse */  border-spacing: 0;         /* 保持无间隙，语义等价于 collapse 的紧凑效果 */}

? 注意：border-collapse: initial 在多数浏览器中等价于 separate（而非 collapse），因此显式写成 separate 更清晰、可维护性更高。

同时，为确保固定列（.fixed）稳定生效，还需确认以下 CSS 基础约束：

1. th.fixed, td.fixed 必须声明 position: sticky + 明确 left 值（如 left: 0 或动态计算值）；
2. 父容器（如 .grid-container）需设置 overflow: auto（含 scrollbar-gutter: stable 可选，防宽度抖动）；
3. z-index 需足够高（如 z-index: 2），避免被其他内容覆盖；
4. 禁止在 table, thead, tbody, tr 上设置 transform、will-change 或 opacity < 1 —— 这些会创建新层叠上下文或隔离粘性定位，破坏 sticky 行为。

? 补充建议（提升健壮性）：

1. 使用 table-layout: fixed 配合明确列宽（如你的 col 标签 width 控制），确保列宽不因内容撑开而破坏固定逻辑；
2. 对固定列添加 background-clip: padding-box，防止背景色溢出边框干扰视觉；
3. 在 Svelte 中，动态 style:left 应确保单位统一（如你已做的 ${widthUnit}），并避免在 SSR 阶段因 colLefts 未初始化导致样式丢失（可加 #if $colLefts 安全包裹）。

综上，这不是 Svelte 特有缺陷，而是 CSS sticky 与 collapse 模式在复杂表格布局中的已知限制。采用 border-collapse: separate 是目前最轻量、兼容性最佳（Chrome/Firefox/Safari 均验证有效）的解决方案。