Question

我已经阅读了关于如何制作响应表的CSS-Tricks，但我的表是另一种方式.. HORIZONTAL方式.. 我的标题在左边不在桌子的顶部。这是我的DEMO

<table border="1" colspan="1" width="781">
        <tbody>
            <tr>
                <td><strong>Package</strong>
                </td>
                <td>Silver</td>
                <td>Gold</td>
            </tr>
            <tr>
                <td><strong>Number of Books</strong>
                </td>
                <td>5</td>
                <td>100</td>
            </tr>
            <tr>
                <td><strong>Extra Cover</strong>
                </td>
                <td>Special</td>
                <td>Super Special</td>
            </tr>
            <tr>
                <td><strong>FREE Pencil</strong>
                </td>
                <td>X</td>
                <td>1000</td>
            </tr>
        </tbody>
    </table>

所以我有两个问题：

我如何才能做到这一点？（不是整个表缩小的类型，它在移动设备中不可读。）
有没有其他选择？

Answer 1

尝试将表格包含在div中，每当表格溢出时，只显示一个与Bootstrap Responsive Tables相同的滚动条。

您可以查看DEMO HERE。

Answer 2

我会看看图层css表格的方式。 - http://eiskis.net/layers/

它是开源的，所以你可以下载并查看他们的方法。

让我的表响应

2 个答案: