35

ヘッダー行が固定され、本文行がスクロール可能なテーブルを作成する方法を知っている人はいますか? それが重要な場合、私はTwitterのブートストラップを使用しています。

これは私が作成しようとしているものの例です:

http://www.siteexperts.com/tips/html/ts04/page1.asp

私が見たすべての例は、それを 2 つの別々の表に分けています。誰かがよりエレガントなソリューションを持っているかどうか疑問に思っていました。

Twitter のブートストラップも、コンテンツに基づいて列のサイズを自動的に調整するため、1 つのテーブルにまとめたいもう 1 つの理由です。

4

4 に答える 4

52

2 つのブートストラップ テーブルをスタックするだけです。1 つは列用、もう 1 つはコンテンツ用です。プラグインはなく、純粋なブートストラップだけです (それは bs ではありません、ハハ!)

  <table id="tableHeader" class="table" style="table-layout:fixed">
        <thead>
            <tr>
                <th>Col1</th>
                ...
            </tr>
        </thead>
  </table>
  <div style="overflow-y:auto;">
    <table id="tableData" class="table table-condensed" style="table-layout:fixed">
        <tbody>
            <tr>
                <td>data</td>
                ...
            </tr>
        </tbody>
    </table>
 </div>

Demo JSFiddle

コンテンツ テーブルの div にはoverflow-y:auto、垂直スクロール バー用の が必要です。を使用する必要table-layout:fixedがありました。そうしないと、列が整列しませんでした。また、テーブル間のスペースをなくすために、すべてをブートストラップ パネル内に配置する必要がありました。

カスタムの列幅でテストしていませんが、テーブル間で幅を一定に保っていれば、うまくいくはずです。 

    // ADD THIS JS FUNCTION TO MATCH UP COL WIDTHS
    $(function () {

        //copy width of header cells to match width of cells with data
        //so they line up properly
        var tdHeader = document.getElementById("tableHeader").rows[0].cells;
        var tdData = document.getElementById("tableData").rows[0].cells;

        for (var i = 0; i < tdData.length; i++)
            tdHeader[i].style.width = tdData[i].offsetWidth + 'px';

    });
于 2013-12-29T00:52:32.373 に答える
9

これはまさにそれを行うjQueryプラグインです：http： //fixedheadertable.com/

使用法：

$('selector').fixedHeaderTable({ fixedColumn: 1 });

fixedColumn水平スクロール用に任意の数の列も固定する場合は、このオプションを設定します。

編集：この例http://www.datatables.net/examples/basic_init/scroll_y.htmlは私の意見でははるかに優れていますが、DataTablesを使用すると、一般的にどのように機能するかをよりよく理解する必要があります。

EDIT2：BootstrapがDataTablesと連携するには、次の手順に従う必要があります： http ://datatables.net/blog/Twitter_Bootstrap_2 （これをテストして動作します）-Bootstrap 3については、ここで議論があります：http：// datatables .net / forums / Discussion / comment / 53462-（私はこれをテストしていません）

于 2013-03-05T02:47:03.203 に答える
4

興味深い質問です。固定位置の行を実行するだけでこれを実行しようとしましたが、この方法の方がはるかに優れているようです。一番下がソース。

CSS

thead { display:block; background: green; margin:0px; cell-spacing:0px; left:0px; }
tbody { display:block; overflow:auto; height:100px; }
th { height:50px; width:80px; }
td { height:50px; width:80px; background:blue; margin:0px; cell-spacing:0px;}

html

<table>
    <thead>
        <tr><th>hey</th><th>ho</th></tr>
    </thead>
    <tbody>
        <tr><td>test</td><td>test</td></tr>
        <tr><td>test</td><td>test</td></tr>
        <tr><td>test</td><td>test</td></tr>
</tbody>

http://www.imaputz.com/cssStuff/bigFourVersion.html

于 2012-07-14T12:19:24.593 に答える
0 
<table class="table table-striped table-condensed table-hover rsk-tbl vScrollTHead">
            <thead>
            <tr>
                <th>Risk Element</th>
                <th>Description</th>
                <th>Risk Value</th>
                <th>&nbsp;</th>
            </tr>
            </thead>
        </table>
<div class="vScrollTable">
            <table class="table table-striped table-condensed table-hover rsk-tbl vScrollTBody">
                <tbody>
                <tr class="">
                    <td>JEWELLERY</td>
                    <td>Jewellery business</td>

                </tr><tr class="">
                    <td>NGO</td>
                    <td>none-governmental organizations</td>
                    </tr>
                </tbody>
            </table>
        </div>





.vScrollTBody{
  height:15px;
}

.vScrollTHead {
  height:15px;
}

.vScrollTable{
  height:100px;
  overflow-y:scroll;
}

頭と体に2つのテーブルがあるとうまくいきました

于 2015-10-14T03:48:36.973 に答える