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