让我的表响应

Question

我已经阅读了关于如何制作响应式表格的 CSS-Tricks，但我的表格是相反的.. 水平方式.. 我的标题在左边而不是在表格的顶部。这是我的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>

所以我对此有两个问题：

1. 我怎样才能使这个响应？ （不是整张表缩小的类型，在移动设备上不可读。）
2. 除了使用表之外，还有其他选择吗？

Answer 1

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

您可以查看DEMO HERE。

Answer 2

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

它是开源的，因此您可以下载并查看他们的方法。