Question

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

我正在使用具有固定布局+响应的twitter bootstrap v2.1。如何使表格在容器div中水平滚动？理想情况下，我还希望第一列始终可见（冻结）。

有可能吗？

Answer 1

实际上我这样解决了主要问题：

<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>

因此，如果有人知道如何冻结第一列我会非常感激

Answer 2

对于数据表的固定列和滚动条

获取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
     } );
} );

reference

具有Twitter引导程序的水平可滚动表

2 个答案: