html - 如何使 div (flexbox) 在滚动时保持在固定位置(用 div 制作表格)

Question

我有一个用 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;
}

这里有一个 fiddle :jsfiddle

所以我想要获得的最终结果是，对于超过 50 行的正文，我希望用户能够向下滚动，同时将标题始终留在屏幕上，而一个加号是“滚动大小” (不知道怎么调用它)等于行高，这意味着当用户滚动一次时，它会下降一个固定的量并准确地将正文行放在标题下方，以避免用户滚动时得到标题，在它下面切半身行，希望你明白我的意思!

Answer 1

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