关于 css sticky 粘性布局的问题

你遇到了一个关于 css sticky 定位的难题，你的代码可以将左侧列锁定为粘性，但在水平滚动超过 300px 时粘性效果就会消失。

原因

sticky 元素会“粘”到其最近的具有“滚动机制”的祖先元素。在你提供的代码中，table-body 被设置了 overflow: auto;，使得水平滚动条生效。但是，table-body 的宽度是固定的（300px），因此当水平滚动超过该宽度时，sticky 元素就会脱离其祖先元素，导致粘性效果失效。

立即学习“前端免费学习笔记（深入）”；

解决方案

要解决此问题，可以将 table-body 的宽度设置为非固定，使其能够与水平滚动条一起扩展。可以将以下 css 添加到你的代码中：

.table-body {
    display: flex;
}

通过将 table-body 设置为 display: flex;，它将成为一个灵活的容器，可以随着水平滚动条的扩展而扩展。现在，sticky 元素将能够在整个可滚动区域内保持粘性。