14

多数の行と列を持つテーブルがあります。しかし、ヘッダーを修正し、最初の列を修正したいと思います。これが私が必要とするものの写真です。

ここに画像の説明を入力

ピンクの部分だけが水平方向と垂直方向にスクロールする必要がありますが、他の部分はスクロール中に表示されたままにする必要があります。私のテーブルはdivにあります。まず、テーブルを 1 つまたは 4 つ (青、赤、緑、ピンク) 使用する必要がありますか?

私はこのフィドルを書きました：

http://jsfiddle.net/5XWqj/1/

最初にヘッダーを修正しようとしましたが、成功しませんでした

#container thead {
    position: fixed;
    top: 0;
}

このようなもので、最初の列を選択して修正します

#container tbody tr td:first-child {
    position: fixed;
    left: 0;
}

しかし、私のテーブルをラップするdivについては修正されていません。jQuery や JavaScript が必要になるかもしれません。

誰かが助けることができれば。

4

2 に答える 2

3

FixedColumn拡張機能を備えた1つのテーブルとDataTablesプラグインのみで同じ問題を解決しました。拡張機能のデモを見ることができます: http://datatables.net/release-datatables/extras/FixedColumns/

私のソリューションでは、1 つのテーブルがあり、そのtheadセクションには、凍結したい行があります (最初のセルに対して行スパンを設定できます)。FixedColumn 拡張機能は、最初の 2 つの列を固定しました。

私が使用した DataTables プラグイン init:

duplicatesTable = $('.js-merge-duplicates-table').dataTable({
            //I want standard table look - no DataTables features but frozen header
            "bPaginate": false,
            "bLengthChange": false,
            "bFilter": false,
            "bSort": false,
            "bInfo": false,
            "bAutoWidth": false,
            "sScrollX": "100%",
            "sScrollY": "500",
            "bScrollCollapse": true
        });
        new FixedColumns(duplicatesTable, {
            "iLeftColumns": 2, //maybe you would need only one column
            "iLeftWidth": 350
        });
于 2013-10-02T08:15:00.930 に答える