Сделать мой стол отзывчивым
Я прочитал 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>
Итак, у меня есть два вопроса по этому поводу:
- Как я могу сделать это Отзывчивым? (Не тот тип, который сокращает всю таблицу, он не будет читаемым на мобильных устройствах.)
- Вместо использования таблицы, есть ли альтернатива?
2 ответа
Решение
Старайтесь содержать свою таблицу в элементе div, и всякий раз, когда таблица переполнена, просто показывайте полосу прокрутки с идеей Bootstrap Responsive Tables.
Вы можете посмотреть ДЕМО ЗДЕСЬ.
Я хотел бы взглянуть на то, как слои CSS делают таблицы. - http://eiskis.net/layers/
Это открытый исходный код, так что вы можете скачать его и проверить их метод.