Question

我想要做的是使用display：table，display：table-row等来创建一组表的div。所有这个表都包含在另一个包含滚动条的div容器中。当我滚动这个外部容器时，我希望第一行滚动并保持可见

如果我有以下html

<div class="tableContainer">
    <div class="divTable">
        <div class="divRow headerRow">
            <div class="divCell header">A</div>
            <div class="divCell header">B</div>
            <div class="divCell header">C</div>
            <div class="divCell header">D</div>
            <div class="divCell header">E</div>
            <div class="divCell header">F</div>
            <div class="divCell header">G</div>
            <div class="divCell header">H</div>
        </div>

        <div class="divRow">
            <div class="divCell">something</div>
            <div class="divCell">something</div>
            <div class="divCell">something</div>
            <div class="divCell">something</div>
            <div class="divCell">something</div>
            <div class="divCell">something</div>
            <div class="divCell">something</div>
            <div class="divCell">something</div>
       </div>

      <!--repeat above row a bunch of times to make the scrollbar appear-->  
    </div>
</div>

和以下CSS

.tableContainer {
    height: 500px;
    overflow: auto;    
}

.divTable {
    display: table;
    position: relative;
}

.divRow {
    display: table-row;
}

.headerRow {
    display: table-row;
    position: fixed;
    top: 0px;
    left: 0px;
    z-index: 1000;
    background-color: white;
}

.divCell {
    display: table-cell;
    padding: 3px;
}

.header {
    font-weight: bold;
}

以及以下JQuery脚本

    $('.tableContainer').scroll(function() {
        $('.headerRow').css('top', $('.tableContainer').scrollTop() + 'px');
    });

如果我运行上面的东西，我可以看到headerRow的顶部更改，但显然它永远不会移动，它只是停留在表的顶部并滚动出视图。我可以让它向下滚动的唯一方法是，如果我将headerRow类更改为绝对定位，但如果我这样做，那么它会破坏列宽并且标题行与详细行的列宽不同。

Answer 1

如果我完全理解你的问题，那么你可以试试......

<script>

 $(document).ready(function(){


 $('.tableContainer').scroll(function() {
    $('.headerRow')
          .stop()
          .animate({"marginTop": ($(window).scrollTop() + 0) + "px"}, "slow" );
});
});

Answer 2

使用固定宽度时非常简单。看看这个CSS：

html, body {
    margin:0;
}
.tableContainer {
    height: 200px;
    overflow: auto;
}
.divTable {
    display: table;
    position: relative;
    width: 600px;
    margin-top: 1.2em;
}
.divRow {
    display: table-row;
}
.headerRow {
    width: 600px;
    display: table-row;
    position: fixed;
    top: 0px;
    left: 0px;
    z-index: 1000;
    background-color: rgba(255,255,255,0.6);
}
.divCell {
    display: table-cell;
    padding: 3px;
    width: 75px;
}
.header {
    font-weight: bold;
}

如果你想要一个非固定宽度，试试这个：

$(document).ready(function () {
    var cellWidth = $(".divCell").css("width");
    var tableWidth = $(".divRow").css("width");
    $(".headerRow").css({
        "width": tableWidth,
        "position": "fixed"
    }).find(".divCell").css("width", cellWidth);
});

此fiddle的示例。如果没有JS支持，它会提供一个很好的后备：标题保留在表中。

使用div而不是表格如何锁定第一个标题行

2 个答案: