javascript - 带 Twitter bootstrap 的水平滚动表

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>

因此，如果有人知道如何卡住第一列，我将非常感激