2

我有一个包含不同列数的表格的页面。这是产品比较页面，用户最多可以选择10个产品进行比较。

我正在使用具有固定布局 + 响应式的 twitter bootstrap 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 回答