Question

我的解决方案是：

a）使用font-size，将其缩小以使其适应320px大小。但成功的是480px（至少是可读的大小）。

b）删除所有填充在“.table thead＆gt; tr＆gt; th，.table tbody＆gt; tr＆gt; th，”@media（max-width：480px）以获得更多空间。

c）最后一个是添加条件（如果“320px，360px”自动切换屏幕尺寸到“480px，640px”）。

我不知道这是不是好主意？

它能在iphone，ipod，samsung ......，nokia ......，sony等所有小型设备上正常运行吗？具有跨浏览器兼容性？如果是这样如何实现它？

这是我的代码：

<table class="table table-responsive">
    <table class="table table-striped table-bordered">
        <thead>
            <tr class="alert alert-info">
                <th>the streets' names</th>
                <th>Victoria</th>
                <th>Lombard</th>
                <th>Champs-Elysées</th>
                <th>Chervonoarmeyskaya</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Location</td>
                <td>Australia</td>
                <td>United States</td>
                <td>France</td>
                <td>Ukraine</td>
            </tr>
        </tbody>
    </table>
</table>

P.S。如果有人会找到解决方案，请考虑大约7-10列。感谢。

Answer 1

我不知道如何在引导程序中使用标准表，但是遇到了几个非常适合使表响应的插件。

FooTable

我还没有真正使用过FooTables，但它看起来很棒。它将指定的列折叠为可扩展部分。

Datatables（响应版）

我使用和使用 FooTables 的相同功能，但使用 Datatables 外观和api。该链接具体说明了如何与bootstrap集成。

Answer 2

我认为在这种情况下，小型设备的最佳解决方案是隐藏一些不太重要的列。提供一个选项以查看更多列，但让用户意识到他们将获得滚动条。

将这么多列放在如此小的屏幕上简直不太可能。移动版本显示较少或以不同方式显示它也是非常接受的。

Answer 3

我认为这个问题与Bootstrap关系不大，更多的是选择一般用于响应表的方法。以下是我在以小分辨率处理表格之前尝试过的一些方法：

使用Bootstrap的table-responsive类，只有一个水平滚动条。
根据Filament Group记录的this technique隐藏不太重要的列。
使用CSS重新格式化表格，使其不再像Chris Coyier的this method那样类似于表格。

还有一些其他responsive table选项。您选择的那个可能取决于您网站的背景和个人偏好。

Answer 4

这样做的一种方法是使用水平jQuery手风琴。 Here's an example using pictures您可以使用它一次显示表格的一列。

Answer 5

只需使用自适应选项即可处理多个列。 https://github.com/DataTables/Responsive 包含具有正确引导版本的dataTable，然后：

$('#table').DataTable(
    {
     responsive: true 

    }
);

响应表在bootstrap中有多个列

5 个答案: