0

HTML:

<thead>
<tr>
    <th><div style="width:36px"><textarea class="cell"></textarea></div></th>
    <th><div style="width:36px"><textarea class="cell"></textarea></div></th>
</tr>
<div class="header">
    <tr>
        <th><div style="width:36px"><textarea class="cell">Name 1</textarea></div></th>
        <th><div style="width:36px"><textarea class="cell">Name 2</textarea></div></th>
    </tr>
</div>
</thead>

CSS:

div.header {
    position: absolute;
}

JS:

$(window).scroll(function() {
    $('div.header').css({
        'top': $(this).scrollTop()
    });
});

最初の偽のヘッダー行をそのままにして、列幅をテーブルに適用し、スクロール時に他の行を移動したいのですが、移動しません。何を変更する必要がありますか?

4

2 に答える 2

2

div を使用する代わりに、tbody に固定の高さと overflow:auto を指定できます。これにより、テーブルの本文がスクロールできるようになります

于 2013-06-22T19:13:58.957 に答える
0

デモ

その解決策は可能ですか？

<thead>
<tr>
    <th><div style="width:36px"><textarea class="cell"></textarea></div></th>
    <th><div style="width:36px"><textarea class="cell"></textarea></div></th>
</tr>
<div class="header">
    <tr>
        <th><div class="horizontal"><textarea class="cell">Name 1</textarea></div></th>
        <th><div class="horizontal"><textarea class="cell">Name 2</textarea></div></th>
    </tr>
</div>
</thead>

CSS

.horizontal {
display:inline-block;
margin-right:20px;
width:150px;
}
.header{
height:35px;
width:165px;
overflow-x:scroll;
overflow-y:scroll;
}
于 2013-06-22T19:31:06.200 に答える