当使用 position: sticky 实现表格固定列时，若表格设置了 border-collapse: collapse，水平滚动会导致固定单元格的边框视觉上“消失”或错位；将其改为 border-collapse: initial（即 separate）可立即解决该问题。
当使用 `position: sticky` 实现表格固定列时，若表格设置了 `border-collapse: collapse`，水平滚动会导致固定单元格的边框视觉上“消失”或错位；将其改为 `border-collapse: initial`（即 `separate`）可立即解决该问题。
在构建支持固定列（fixed columns）的响应式表格组件（如 Svelte、React 或原生 HTML/CSS 实现）时，一个常见却极易被忽视的渲染异常是：固定列的边框在水平滚动后变得不可见或错位显示——看似透明，实则因 border-collapse: collapse 与 sticky 定位的底层渲染冲突所致。
根本原因在于：
- border-collapse: collapse 会合并相邻单元格的边框，形成共享边框线，并依赖表格整体布局进行像素级对齐；
- 而 position: sticky 元素在滚动时脱离常规文档流，其定位和边框绘制可能无法与 collapsed 边框模型同步更新，导致边框被裁剪、覆盖或渲染失效（尤其在 Chromium 内核浏览器中表现明显）。
✅ 解决方案非常简洁有效：
将表格的 border-collapse 值从 collapse 改为 separate（可通过 initial 或显式写为 separate 实现）：
table {
border-collapse: separate; /* ✅ 替代 collapse */
border-spacing: 0; /* 保持无间隙，避免额外空隙 */
}⚠️ 注意事项：
- border-spacing: 0 必须保留，否则 separate 模式下单元格间会出现默认间距（通常为 2px），破坏视觉一致性；
- 所有边框需明确定义在 td/th 上（而非仅靠 collapse 合并），例如：
th, td { border-right: 1px solid #525252; border-bottom: 1px solid #525252; } /* 左侧/顶部边框需单独处理首列/首行 */ th:first-child, td:first-child { border-left: 1px solid #525252; } thead th { border-top: 1px solid #525252; } - z-index 仍需保留在 .fixed 类中（如 z-index: 2），确保固定列层叠于滚动内容之上；
- 若需兼容 IE（已不推荐），注意 sticky 本身不受支持，应配合 JS 回退方案。
? 总结：这不是框架（Svelte/React/Vue）的问题，而是 CSS 渲染引擎在特定组合下的已知行为。border-collapse: separate + position: sticky 是目前最稳定、无需 hack 的固定列表格边框渲染方案。务必优先验证此样式组合，可省去大量调试时间。
立即学习“前端免费学习笔记（深入）”；
