1

固定列のテーブルを作成しようとしていますが、次の例に従っています:

http://jsfiddle.net/emn13/YMvk9/

容器：

 div { 
            width: 600px; 
            overflow-x:scroll;  
            margin-left:5em; 
            overflow-y:visible;
            padding-bottom:1px;
        }

固定列:

.headcol {
            position:absolute; 
            width:5em; 
            left:0;
            top:auto;
            border-right: 0px none black; 
            border-top-width:3px; /*only relevant for first row*/
            margin-top:-3px; /*compensate for top border*/
        }

問題は、コンテナーの高さが 100px などに固定されている場合、固定された列がスクロールバーに接続されずにデフォルトの高さを維持することです。

4

1 に答える 1

0

相対位置に設定できるコンテナを追加してみてください。

div#container{
    position:relative;
    height:100px;
    overflow:scroll;
}

以下の例では、固定された行が残りの行とともに垂直方向にスクロールすることがわかります。

http://jsfiddle.net/VRNsX/

ちょっとした jQuery が嫌いでない場合は、私が考案した別のアプローチを次に示します。

$('#tbl').scroll(function(e) {
    var self = this;
    $('.headcol').each(function() {
        $(this).css({
            'top': ($(this).index('.headcol') * $(this).outerHeight() + 3) - $(self).scrollTop()
        });
    });
});

http://jsfiddle.net/YMvk9/786/

于 2012-11-23T16:49:29.220 に答える