У меня есть веб-страница со списком предметов. В шаблоне по умолчанию для этого используется таблица, что я считаю очень подходящим. Однако в этой таблице есть один столбец, который содержит гораздо больше текста, чем другие:
Хотя это работает на большом экране, читать на маленьком экране очень неприятно:
Чтобы лучше использовать доступное пространство, я могу думать только о макете поддельной таблицы с использованием div. Я сделал прототип, используя макет сетки начальной загрузки, который выглядит как строка таблицы на больших экранах, но имеет другой макет на маленьких и очень маленьких экранах:
Хотя это улучшает читаемость текста за счет использования полной ширины, я больше не могу использовать имеющиеся у меня утилиты для таблиц, и это незаметно нарушает работу пользователя. Например, я использую красивый скрипт, который позволяет выполнять сортировку на клиенте. Но это работает только на реальных таблицах. (Также есть небольшие несоответствия и визуальные различия между настоящими таблицами и поддельными таблицами)
Есть ли способ переформатировать строку таблицы в многострочный контейнер, подобный тому, который показан на последнем изображении?
К вашему сведению: я использую jquery 2.1.1, Bootstrap 3.2.0.1 в качестве GUI Framework и asp.net MVC на сервере.
Bootply здесь: http://www.bootply.com/pRehwTai4G
Изменить: в случае, если это не получилось достаточно ясным: я хочу сохранить теги <tr>
и <td>
, но стилизовать их так же, как div. Я не хочу заменять таблицу на div.