当表格设置粘性列并应用 border-radius 时，滚动过程中因父容器与粘性列渲染层级或裁剪边界不一致，常导致圆角区域透出底层背景色（如蓝色），本文提供两种可靠方案：静态统一圆角与动态同步圆角。

当表格设置粘性列并应用 `border-radius` 时，滚动过程中因父容器与粘性列渲染层级或裁剪边界不一致，常导致圆角区域透出底层背景色（如蓝色），本文提供两种可靠方案：静态统一圆角与动态同步圆角。

在实现带圆角的粘性列（如使用 position: sticky 的绿色列）时，一个常见视觉缺陷是：滚动时，粘性列顶部圆角边缘会“漏出”其父容器（如表头 <thead> 或包裹容器）的背景色（如蓝色），形成不协调的色块——这并非 bug，而是浏览器对 <code>overflow、clip-path 和层叠上下文（stacking context）的默认处理所致。

✅ 方案一：静态统一圆角（推荐优先尝试）

最简洁有效的解法是确保粘性列与其直接父容器（通常是 <th> 或 <code><td> 所在的 <code><tr> 或 <code><thead>）拥有完全一致的 <code>border-radius 值，并配合 overflow: hidden 进行裁剪：

/* 表头容器（如 thead 或包裹 sticky 列的 tr） */
.table-header {
  overflow: hidden; /* 关键：裁剪超出边界的子元素 */
  border-radius: 8px; /* 与 sticky 列保持一致 */
}

/* 粘性列单元格（如绿色列） */
.sticky-column {
  position: sticky;
  left: 0;
  background-color: #4ade80; /* green */
  border-radius: 8px; /* 必须与父容器完全相同 */
  z-index: 10;
}

⚠️ 注意事项：

• overflow: hidden 必须作用于包含粘性列且具有圆角的最近共同祖先容器（通常不是 <table>，而是 <code><thead> 或自定义 wrapper）； <li>避免在粘性列上设置 <code>box-shadow 或 outline，它们可能破坏圆角裁剪效果；
• 若使用 table-layout: fixed，需确保列宽计算兼容圆角布局。

✅ 方案二：动态同步圆角（适用于复杂滚动场景）

当粘性列需响应滚动位置动态调整圆角（例如仅在顶部对齐时显示上圆角，滚动后变为直角），可借助 getBoundingClientRect() 实时检测对齐状态，并通过 JavaScript 动态更新样式：

function syncStickyRadius() {
  const stickyCol = document.querySelector('.sticky-column');
  const header = document.querySelector('.table-header');

  if (!stickyCol || !header) return;

  const stickyRect = stickyCol.getBoundingClientRect();
  const headerRect = header.getBoundingClientRect();

  // 判断 sticky 列是否与 header 顶部对齐（即处于“吸附”状态）
  const isTopAligned = Math.abs(stickyRect.top - headerRect.top) < 2;

  // 动态设置圆角：对齐时用圆角，否则设为 0（或按需调整）
  stickyCol.style.borderRadius = isTopAligned ? '8px 8px 0 0' : '0 0 0 0';
}

// 在 scroll 和 resize 时触发
window.addEventListener('scroll', syncStickyRadius);
window.addEventListener('resize', syncStickyRadius);
// 初始执行一次
syncStickyRadius();

? 提示：该方案适合高级交互需求，但会引入轻微性能开销。建议配合 requestAnimationFrame 优化：

let isSyncScheduled = false;
function scheduleSync() {
  if (!isSyncScheduled) {
    requestAnimationFrame(() => {
      syncStickyRadius();
      isSyncScheduled = false;
    });
    isSyncScheduled = true;
  }
}

总结

圆角粘性列的背景外露本质是视觉裁剪失效问题。优先采用方案一（静态统一 border-radius + overflow: hidden），它零 JS、高兼容、易维护；仅当设计要求圆角随滚动状态变化时，再启用方案二。无论哪种方式，都应避免在粘性列及其父容器上设置 transform（除非必要），因其可能创建新的层叠上下文，干扰 z-index 和裁剪行为。