CSS粘性定位失效：表格水平滚动时表头和列固定失效怎么办？

CSS粘性定位失效及解决方案：表格水平滚动导致表头和列固定失效

在使用CSS的position: sticky属性创建粘性布局时，可能会遇到一些问题。本文将分析一个具体案例，解释sticky失效的原因，并提供有效的解决方案。

案例： 代码试图创建一个表格，表头和左侧列需要在滚动时保持可见。然而，水平滚动超出表格容器宽度（300px）后，粘性效果失效。

原始代码片段：

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

<meta charset="utf-8"><meta content="width=device-width, initial-scale=1.0" name="viewport"><title>sticky sidebar example</title><style>.table-container {    display: block;    max-width: 300px;    max-height: 400px; /* 可调整 */    overflow: auto;}.header-row {    display: flex;    position: sticky;    top: 0;    background-color: #f8f8f8;    z-index: 1;}.header-cell,.cell {    min-width: 80px;    padding: 8px;    border: 1px solid #ddd;}.header-cell {    font-weight: bold;}.cell-fixed {    position: sticky;    left: 0;    background-color: #f8f8f8;    z-index: 1;}.table-body {    display: block;}.row {    display: flex;}</style><div class="table-container">    <div class="header-row">        <div class="header-cell header-fixed">header 1</div>        <div class="header-cell">header 2</div>        <div class="header-cell">header 3</div>        <div class="header-cell">header 4</div>        <div class="header-cell">header 5</div>        <div class="header-cell">header 6</div>        <div class="header-cell">header 7</div>    </div>    <div class="table-body">        <div class="row">            <div class="cell cell-fixed">row 1</div>            <div class="cell">data 2</div>            <div class="cell">data 3</div>            <div class="cell">data 4</div>            <div class="cell">data 5</div>            <div class="cell">data 6</div>            <div class="cell">data 7</div>        </div>    </div></div>

登录后复制