Joomla 4. Компонент K2 и форк K2ForJ4 (18 янв 2024)

Если вас, как и меня, достало выслушивать (вычитывать) бесконечные обещания разработчика K2 опубликовать версию компонента K2 под Joomla 4 (без чего невозможно реализовать апгрейд from Joomla 3 to Joomla 4) - воспользуйтесь форком K2ForJ4. Который в данный момент установлен и без каких-либо проблем работает на этом веб-сайте.

Создаем адаптивную таблицу. Css trick

Больше
4 года 8 мес. назад - 4 года 8 мес. назад #1 от Aleksej
Прообраз доступен по ссылке , здесь же - интересная его модификация: Bootstrap snippet Резиновое отображение таблицы. Практически полностью цитирую описание и сам сниппет далее:

В данной версии:

  • Можно размещать на одной странице множество сжимаемых таблиц.
  • Пустые колонки таблицы не отображает в блочном виде, т. к. они там не нужны вовсе.
  • Очень длинные заголовки теперь не вылезают за экран и не загораживают текст.
  • При просмотре таблицы на очень узких устройствах - заголовок перемещается вверх и если в этом случае он не умещается на экран — в конце ставится многоточие
  • Заголовки прилегают к правой части блока что является более удобным для чтения данных.
  • Вдобавок возможно регулировать момент преобразование таблицы в блочной вид XS, SM, MD.
  • Футер также преобразуется в блочный вид


Code:
/*no more tables*/ @media only screen and (max-width: 767px) { table.xs-no-table, table.xs-no-table>tfoot, table.xs-no-table>tbody, table.xs-no-table>tbody>tr>th,table.xs-no-table>tbody>tr>td,table.xs-no-table>tbody>tr, table.xs-no-table>tfoot>tr>th,table.xs-no-table>tfoot>tr>td,table.xs-no-table>tfoot>tr { display: block; } table.xs-no-table>thead>tr { display: none; } table.xs-no-table>tbody>tr,table.xs-no-table>tfoot>tr { border: 1px solid #ccc; } table.xs-no-table>tbody>tr>td,table.xs-no-table>tfoot>tr>td { border: none; border-bottom: 1px solid #eee; position: relative; white-space: normal; text-align:left; padding-left: 50%; } table.xs-no-table>tbody>tr>td:before,table.xs-no-table>tfoot>tr>td:before { white-space: nowrap; font-weight: bold; content: attr(data-title); text-overflow: ellipsis; white-space: nowrap; overflow: hidden; display: block; position: absolute; top: 6px; left: 6px; width: 45%; padding-left: 0px; text-align:right; } table.xs-no-table>tbody>tr>td:empty,table.xs-no-table>tfoot>tr>td:empty { display: none; } } @media only screen and (max-width: 991px) { table.sm-no-table, table.sm-no-table>tfoot, table.sm-no-table>tbody, table.sm-no-table>tbody>tr>th,table.sm-no-table>tbody>tr>td,table.sm-no-table>tbody>tr, table.sm-no-table>tfoot>tr>th,table.sm-no-table>tfoot>tr>td,table.sm-no-table>tfoot>tr { display: block; } table.sm-no-table>thead>tr { display: none; } table.sm-no-table>tbody>tr,table.sm-no-table>tfoot>tr { border: 1px solid #ccc; } table.sm-no-table>tbody>tr>td,table.sm-no-table>tfoot>tr>td { border: none; border-bottom: 1px solid #eee; position: relative; white-space: normal; text-align:left; padding-left: 50%; } table.sm-no-table>tbody>tr>td:before,table.sm-no-table>tfoot>tr>td:before { white-space: nowrap; font-weight: bold; content: attr(data-title); text-overflow: ellipsis; white-space: nowrap; overflow: hidden; display: block; position: absolute; top: 6px; left: 6px; width: 45%; padding-left: 0px; text-align:right; } table.sm-no-table>tbody>tr>td:empty,table.sm-no-table>tfoot>tr>td:empty { display: none; } } @media only screen and (max-width: 1199px) { table.md-no-table, table.md-no-table>tfoot, table.md-no-table>tbody, table.md-no-table>tbody>tr>th,table.md-no-table>tbody>tr>td,table.md-no-table>tbody>tr, table.md-no-table>tfoot>tr>th,table.md-no-table>tfoot>tr>td,table.md-no-table>tfoot>tr { display: block; } table.md-no-table>thead>tr { display: none; } table.md-no-table>tbody>tr,table.md-no-table>tfoot>tr { border: 1px solid #ccc; } table.md-no-table>tbody>tr>td,table.md-no-table>tfoot>tr>td { border: none; border-bottom: 1px solid #eee; position: relative; white-space: normal; text-align:left; padding-left: 50%; } table.md-no-table>tbody>tr>td:before,table.md-no-table>tfoot>tr>td:before { white-space: nowrap; font-weight: bold; content: attr(data-title); text-overflow: ellipsis; white-space: nowrap; overflow: hidden; display: block; position: absolute; top: 6px; left: 6px; width: 45%; padding-left: 0px; text-align:right; } table.md-no-table>tbody>tr>td:empty,table.md-no-table>tfoot>tr>td:empty { display: none; } } @media only screen and (max-width: 330px) { /*xxs*/ table.md-no-table>tbody>tr>td:before,table.md-no-table>tfoot>tr>td:before, table.sm-no-table>tbody>tr>td:before,table.sm-no-table>tfoot>tr>td:before, table.xs-no-table>tbody>tr>td:before,table.xs-no-table>tfoot>tr>td:before { position: static; text-align:left; width: 100%; } table.md-no-table>tbody>tr>td,table.md-no-table>tfoot>tr>td, table.sm-no-table>tbody>tr>td,table.sm-no-table>tfoot>tr>td, table.xs-no-table>tbody>tr>td,table.xs-no-table>tfoot>tr>td{ padding-left: 5px; } }

Просто поставьте таблице один из классов: xs-no-table, sm-no-table или md-no-table.
Обязательно выделите у таблицы шапку и тело thead tbody
И Обязательно пропишите каждой ячейке в теле таблицы атрибут заголовка data-title=”Заголовок”
Все это работает без использования JS на всех современных браузерах

Последнее редактирование: 4 года 8 мес. назад пользователем Aleksej.

Пожалуйста Войти или Регистрация, чтобы присоединиться к беседе.

Dev banner 3
Работает на Kunena форум