2

私はしばらくの間、これと格闘してきました。多くの行と多くの列を持つテーブルがあるとします (ページを垂直方向と水平方向にオーバーフローします)。1列目(糸)を固定したい。

キャッチ: 垂直および水平スクロールバーが常に表示されるようにします。つまり、ユーザーが垂直スクロール バーを見つけるために水平方向にスクロールする必要はなく、その逆も同様です。

私が思いついた最善の方法は、thead と tbody を 2 つの別々のテーブルに分割して、同期スクロールを行うことですが、これにより、セル幅の配置と一致に問題が生じるため、むしろしたくありません。

これを解決するにはどうすればよいでしょうか？

4

3 に答える 3

2

テーブルを2つのテーブルに分割する必要はありません。1つのテーブルを使用するが、それでもヘッダーをフリーズする次のことを試すことができます。

<table >  
    <thead><tr><th>This is my header</th></tr></thead>
    <tbody style="max-height:100px;overflow:auto;display:block">
        <tr>
            <td>col1</td>
        </tr>
        <tr>
            <td>col1</td>
        </tr><tr>
            <td>col1</td>
        </tr><tr>
            <td>col1</td>
        </tr><tr>
            <td>col1</td>
        </tr><tr>
            <td>col1</td>
        </tr><tr>
            <td>col1</td>
        </tr><tr>
            <td>col1</td>
        </tr><tr>
            <td>col1</td>
        </tr><tr>
            <td>col1</td>
        </tr><tr>
            <td>col1</td>
        </tr><tr>
            <td>col1</td>
        </tr><tr>
            <td>col1</td>
        </tr><tr>
            <td>col1</td>
        </tr><tr>
            <td>col1</td>
        </tr><tr>
            <td>col1</td>
        </tr><tr>
            <td>col1</td>
        </tr><tr>
            <td>col1</td>
        </tr><tr>
            <td>col1</td>
        </tr><tr>
            <td>col1</td>
        </tr>
    </tbody>
</table>
于 2011-06-28T19:18:37.993 に答える
0

私はjquerydatatablesプラグインを使用しています。必要なものの例は、ここで確認できますhttp://www.datatables.net/examples/basic_init/scroll_xy.html

于 2011-06-28T19:18:32.373 に答える
0

同様の効果を達成したい人へ：

と を使用して、テーブルを div で囲みwidth:100%;ますoverflow:auto;。

テーブルのヘッダー部分をコピーし、それを含む新しいテーブルを作成します。この表を絶対的なものとして位置付けてください! ( position:absolute;)

ヘッダー テーブルを実際のテーブルと同じ div に配置します。(元のヘッダー部分に完全に収まる必要があります)。

jQuery を使用して div のスクロールを管理し、ヘッダーを所定の位置に貼り付けます...

jQuery(document).ready(function() {
    jQuery('#tableDiv').scroll(function() {
        jQuery('#copiedHeaderTable').css('top', jQuery(this).scrollTop());
    });
})

もちろん、このソリューションには要件についていくつかの仮定がありますが、いくつかの利点があります (シンプルさが主な理由です)。

編集セル幅が一致するようにするには、すべてのコンテンツを div でラップし、複製の前に各 div の幅を手動で設定します。

jQuery('#headerRow th div').each(function() {
    jQuery(this).css('width', jQuery(this).parent()[0].offsetWidth+'px');
});
于 2011-06-30T18:13:55.140 に答える