0

私がやりたいことは、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 クラスを絶対に配置するように変更することですが、そうすると、列幅が壊れ、ヘッダー行が詳細行と同じ列幅になりません。

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 に答える