javascript - 创建响应 html 表时出现问题

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

bootstrap 不支持移动设备上漂亮的表格 View ，您需要自己处理以呈现数据。

你需要选择一种最适合你的机制来解决这个问题，下面是一些提供解决这个问题的链接和思路:

• jQuery 移动版:http://demos.jquerymobile.com/1.3.0-beta.1/docs/tables/table-reflow.html

• CSS 技巧:https://css-tricks.com/responsive-data-tables/

• 您还可以尽可能减少在移动设备上查看的列数，并为每行提供一个“查看全部”按钮，以便用户以 Accordion 样式划分查看所有行数据

或者让表格保持滚动...