关于css sticky粘性问题?

作者站长头像
站长
· 阅读数 16

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <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>
</head>

<body>

    <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>
</body>
</html>

左右滑动时可以粘住在左边,但是左右滚动超过300px就不粘住了,求解

回复
1个回答
avatar
test
2024-06-18

可以这样改一下试下:

.table-body {
    display: flex;
}

粘性元素会“粘”到其最近的具有“滚动机制”的祖先元素,但只会在他所处的 table-body 容器里生效,table-body 的宽度需要变成非固定的

回复
likes
适合作为回答的
  • 经过验证的有效解决办法
  • 自己的经验指引,对解决问题有帮助
  • 遵循 Markdown 语法排版,代码语义正确
不该作为回答的
  • 询问内容细节或回复楼层
  • 与题目无关的内容
  • “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容