带有 Twitter 引导程序的水平滚动表答案

【问题标题】：Horizontally scrollable table with Twitter bootstrap带有 Twitter 引导程序的水平滚动表
【发布时间】：2012-09-05 00:19:47
【问题描述】：

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

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

有可能吗？

【问题讨论】：

标签： javascript css twitter-bootstrap scroll

【解决方案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>

因此，如果有人知道如何冻结第一列，我将不胜感激

【讨论】：

要修复表格右侧的问题，请添加以下样式：“max-width: none;”到表标签。

【解决方案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

【讨论】：