2

異なる列数を持つことができるテーブルのあるページがあります。商品比較ページで、最大10個の商品を選択して比較できます。

固定レイアウト+レスポンシブでtwitterブートストラップv2.1を使用しています。コンテナdiv内でテーブルを水平方向にスクロール可能にするにはどうすればよいですか？理想的には、最初の列を常に表示（凍結）したいと思います。

出来ますか？

4

2 に答える 2

12

実際、私はこの方法で主な問題を解決しました。

<div class="row">
    <div class="span12" style="overflow: auto">
        <table class="table table-bordered">
            <thead>
                <th>Column 1</th><th>Column 2</th><th>Column 3</th><th>Column 4</th><th>Column 5</th>
                <th>Column 6</th><th>Column 7</th><th>Column 8</th><th>Column 9</th><th>Column 10</th>
            </thead>
            <tbody>
                <tr>
                    <td>Row1 Column1</td><td>Row1 Column2</td><td>Row1 Column3</td><td>Row1 Column4</td><td>Row1 Column5</td>
                    <td>Row1 Column6</td><td>Row1 Column7</td><td>Row1 Column8</td><td>Row1 Column9</td><td>Row1 Column10</td>
                </tr>
                <tr>
                    <td>Row2 Column1</td><td>Row2 Column2</td><td>Row2 Column3</td>    <td>Row2 Column4</td><td>Row2 Column5</td>
                    <td>Row2 Column6</td><td>Row2 Column7</td><td>Row2 Column8</td><td>Row2 Column9</td><td>Row2 Column10</td>
                </tr>
                <tr>
                    <td>Row3 Column1</td><td>Row3 Column2</td><td>Row3 Column3</td><td>Row3 Column4</td><td>Row3 Column5</td>
                    <td>Row3 Column6</td><td>Row3 Column7</td><td>Row3 Column8</td><td>Row3 Column9</td><td>Row3 Column10</td>
                </tr>
                <tr>
                    <td>Row4 Column1</td><td>Row4 Column2</td><td>Row4 Column3</td><td>Row4 Column4</td><td>Row4 Column5</td>
                    <td>Row4 Column6</td><td>Row4 Column7</td><td>Row4 Column8</td><td>Row4 Column9</td><td>Row4 Column10</td>
                </tr>
                <tr>
                    <td>Row5 Column1</td><td>Row5 Column2</td><td>Row5 Column3</td><td>Row5 Column4</td><td>Row5 Column5</td>
                    <td>Row5 Column6</td><td>Row5 Column7</td><td>Row5 Column8</td><td>Row5 Column9</td><td>Row5 Column10</td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

だから誰かが最初の列をフリーズする方法を知っているなら私は本当にそれをいただければ幸いです

于 2012-09-05T00:49:54.203 に答える
1

データテーブルの固定列とスクロールバーの場合

取得してFixedHeader plug-in から

$(document).ready( function () {
    var oTable = $('#example').dataTable( {
        "sScrollX":       "100%",
        "sScrollXInner":  "150%",
        "sScrollY":       "250px",
        "bScrollCollapse": true,
        "bPaginate":       false
    } );
     new FixedColumns( oTable, {
         "iColumns": 2
     } );
} );

参照

于 2013-07-26T06:54:36.683 に答える