带有 Twitter 引导程序的水平滚动表 [英] Horizontally scrollable table with Twitter bootstrap

问题描述

我有一个包含不同列数的表格的页面.产品对比页面，最多可选择10款产品进行对比.

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

有可能吗?

解决方案

其实我是这样解决主要问题的:

<div class="span12" style="overflow: auto"><table class="table table-bordered"><头><第1列</th></th>第2列</th></th>第3列</th></th>第4列</th><th>第5列</th><第6列</th>第7列</th>第8列</th>第9列</th><th>第10列</th></thead><tr><td>Row1 Column1</td><td>Row1 Column2</td><td>Row1 Column3</td><td>Row1 Column4</td><td>行1<td>Row1 Column6</td><td>Row1 Column7</td><td>Row1 Column8</td><td>Row1 Column9</td><td>行1</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>行</tr><tr><td>Row3 Column1</td><td>Row3 Column2</td><td>Row3 Column3</td><td>Row3 Column4</td><td>Row3<td>行3列6</td><td>行3列7</td><td>行3列8</td><td>行3列9</td><td>行</tr><tr><td>Row4 Column1</td><td>Row4 Column2</td><td>Row4 Column3</td><td>Row4 Column4</td><td>Row4<td>Row4 Column6</td><td>Row4 Column7</td><td>Row4 Column8</td><td>Row4 Column9</td><4d>Row</tr><tr><td>行5列1</td><td>行5列2</td><td>行5列3</td><td>行5列4</td><td>行5列<td>行5列6</td><td>行5列7</td><td>行5列8</td><td>行5列9</td><5d>行</tr></tbody>

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

I have a page with a table that can have different number of columns. It is product comparison page and user can select up to 10 products to compare.

I am using twitter bootstrap v2.1 with fixed layout + responsive. How can I make the table scrollable horizontally within container div? Ideally I would also like to have the first column always visible (frozen).

Is it possible?

解决方案

Actually I solved the main problem this way:

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

So if anyone know how to freeze first column I would really appreciate it

这篇关于带有 Twitter 引导程序的水平滚动表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！