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>

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

我尝试使用position:fixed，然后它弄乱了＆＃34; tableBody＆＃34;内容。

这里是当前的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，我希望用户能够向下滚动，同时将标题始终保留在屏幕上，并且加号将是＆＃34;滚动大小＆＃34; （不知道如何调用它）等于行高度，这意味着当用户滚动一次时，它将下降一个固定的数量，并在标题下面准确地放置一个正文行，以避免当用户滚动你得到标题，并在它下面切成半身排，希望你理解我的意思！

Answer 1

.tableWrapper {的位置是：相对于; } .tableHeader {position:absolute;宽度：100％：`}

Answer 2

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

.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边距来设置它

Answer 3

请检查此项，您可以使用position: sticky;代替position: sticky;请查看fidle，希望它能帮助您 https://jsfiddle.net/06L52wm1/36/

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

3 个答案: