jquery - 让我的 table 响应

Question

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