0

我想要做的是让一组 div 使用 display:table、display:table-row 等来做一个表。所有这个表都包含在另一个有滚动条的 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 类更改为绝对定位，但如果我这样做，那么它会破坏列宽，并且标题行与详细信息行的列宽不同。

4

2 回答 2

0

如果我完全理解您的问题，那么您可以尝试以下方法...

<script>

 $(document).ready(function(){


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

于 2013-03-27T15:22:37.193 回答
0

当您使用固定宽度时，它非常简单。看看这个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);
});

这个小提琴的例子。如果没有 JS 支持，它提供了一个很好的回退：标题保留在表中。

于 2013-03-27T16:06:39.417 回答