Сделать мой стол отзывчивым

Question

Я прочитал CSS-хитрости о том, как создать адаптивную таблицу, но моя таблица работает наоборот... ГОРИЗОНТАЛЬНО... Мои заголовки слева, а не вверху таблицы. Вот моя ДЕМО

<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.

Вы можете посмотреть ДЕМО ЗДЕСЬ.

Answer 2

Я хотел бы взглянуть на то, как слои CSS делают таблицы. - http://eiskis.net/layers/

Это открытый исходный код, так что вы можете скачать его и проверить их метод.