Question

创建了一个带有固定左列的html表。

以下是代码：

<div class="table-responsive" >
    <table class="table table-striped table-bordered table-hover table-condensed" style= "width:50%">
        <thead>
            <tr>
                <th>#</th>
                <th>Table heading</th>
                <th>Table heading</th>
                <th>Table heading</th>
                <th>Table heading</th>
                <th>Table heading</th>
                <th>Table heading</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>Table cell</td>
                <td>Table cell</td>
                <td>Table cell</td>
                <td>Table cell</td>
                <td>Table cell</td>
                <td>Table cell</td>
            </tr>
            <tr>
                <td>2</td>
                <td>Table cell</td>
                <td>Table cell</td>
                <td>Table cell</td>
                <td>Table cell</td>
                <td>Table cell</td>
                <td>Table cell</td>
            </tr>
            <tr>
                <td>3</td>
                <td>Table cell</td>
                <td>Table cell</td>
                <td>Table cell</td>
                <td>Table cell</td>
                <td>Table cell</td>
                <td>Table cell</td>
            </tr>
        </tbody>
    </table>
</div>

链接：http://jsfiddle.net/4XG7T/3/

该表在移动设备上显示如下，并且不会使用固定列滚动。

Mobile view

有人可以建议我如何在移动设备上实现预期的行为吗？。

Answer 1

引导程序不支持移动设备上的漂亮表格视图，您需要自己处理它以呈现数据。

您需要选择最适合您解决此问题的机制，下面是一些提供此问题解决方案的链接和想法：

jQuery Mobile：http://demos.jquerymobile.com/1.3.0-beta.1/docs/tables/table-reflow.html
CSS技巧：https://css-tricks.com/responsive-data-tables/
您还可以以适合他们的方式最小化在移动设备上查看的列数，并为每个行提供一个“查看全部”按钮，以便用户查看手风琴风格部门中的所有行数据

或者只是保持表滚动

创建响应html表时遇到的问题

1 个答案: