如何使div（flexbox）在滚动时保持在固定位置（使用div做表）

Posted 2021-04-21

我有一个用div制作的表，使用flexbox来获得我的div的漂亮表格格式。

现在我得到了这样的结构：

<div class="tableWrapper">
<div class="tableHeader">   
    <div class="tableHeaderRow">
        <div class="tableHeaderCells"></div>
        <div class="tableHeaderCells"></div>
    </div>
</div>
<div class="tableBody">
    <div class="tableBodyRow">
        <div class="tableBodyCells"></div>
        <div class="tableBodyCells"></div>
    </div>
    <div class="tableBodyRow">
        <div class="tableBodyCells"></div>
        <div class="tableBodyCells"></div>
    </div>
    <div class="tableBodyRow">
        <div class="tableBodyCells"></div>
        <div class="tableBodyCells"></div>
    </div>
</div>

所以现在我想要实现的是“tableHeader”始终保持在同一位置，所以当“tableBody”内容很大（它可能有50个）并且不适合浏览器屏幕时，当用户向下滚动，标题跟随，所以它始终可见。

我尝试使用position:fixed然后它弄乱了“tableBody”内容。

这里是当前的css：

    .tableWrapper {
    width: 100%;
    height: 100%;
    margin-top: 15px;
    position: relative;
}

.tableHeader {
    width: 100%;
    position: relative;
}

.tableHeaderRow {
    display: flex;
    height: 35px;
    border-bottom: 1px solid #000;
    align-items: center;
}

.tableHeaderCells {
    display: flex;
    border-top: 1px solid #000;
    border-bottom: none;
    border-left: 1px solid #000;
    border-right: 1px solid #000;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    height: 100%;
    width: 100%;
}
.tableBodyCells {
    display: flex;
    border-top: none;
    border-bottom: none;
    border-right: 1px solid #000;
    border-left: 1px solid #000;
    height: 100%;
    width: 100%;
    align-items: center;
    justify-content: center;
}

.tableBody {
    width: 100%;
    height: 100%;
    position: relative;
}

.tableBodyRow {
    display: flex;
    height: 50px;
    width: 100%;
    align-items: center;
    border-bottom: 1px solid #000;
    border-top: 1px solid #000;
    margin-bottom: 2px;
}

这里有一个小提琴：jsfiddle

所以我想获得的最终结果是，身体超过50，我希望用户能够向下滚动，同时将标题始终保留在屏幕上，并且加号将是“滚动大小”（不要知道如何调用它）等于行高度，这意味着当用户滚动一次时，它将下降一个固定的数量，并在标题下面准确地放置一个正文行，以避免当用户滚动时获得标题，并在它下面切半身排，希望你理解我的意思！

答案

.tableWrapper{position：相对; } .tableHeader {position:absolute;width：100％：`}

另一答案

我不知道你的问题是什么位置：固定，但它似乎不会改变身体内容。

.tableHeader {
    width: 100%;
    position: fixed;
    background-color: #FFFFFF;
    z-index:999;
}
.tableBody {
    width: 100%;
    height: 100%;
    position: relative;
    padding-top: 50px;
}

JSfiddle

虽然标题的宽度仍有问题，但我认为您可以通过使用calc（）从tableHeader的宽度中删除body边距来设置它。

另一答案

请检查这个你可以使用position: sticky;而不是position: sticky;请检查fidle，希望它会帮助你https://jsfiddle.net/06L52wm1/36/