Адаптивная HTML таблица для uCoz
827материалов
228тем на форуме
3004комментария
6160пользователей

Адаптивная HTML таблица для uCoz


Описание:

Если вы когда-нибудь пробовали создавать сайт, адаптированный под мобильные устройства, или переделывать сайт для настольных компьютеров в адаптивный, то наверно знаете, что одна из самых больших проблем при такой верстке — это корректное отображение таблиц. Обычно таблицы не очень хорошо адаптируются под маленькие экраны, и поэтому, если на Вашем сайте без них никак не обойтись, то нужно найти способ отображать их удобно для пользователя.

Создатели сайтов придумали уже не один способ, как это сделать. С помощью CSS и JavaScript можно выстроить ячейки на маленьких экранах в одну колонку, можно скрыть колонки с не очень важными данными, и даже превратить таблицу в круговую диаграмму. Все эти способы уже не раз описаны как на английском, так и на русском языке, и Вы можете без труда прочесть о них в Интернете. Я же хочу Вам представить адаптивные таблицы на CSS и HTML

Установка:

CSS код:
Код
<style>
table {
         border-collapse: collapse;
         width: 100%;
}
th {
         background-color: #eee;
         font-weight: bold;
}
th,
td {
         border: 0.125em solid #333;
         line-height: 1.5;
         padding: 0.75em;
         text-align: left;
}
/* Stack rows vertically on small screens */
@media (max-width: 30em) {
         /* Hide column labels */
         thead tr {
         position: absolute;
         top: -9999em;
         left: -9999em;
         }
         tr {
         border: 0.125em solid #333;
         border-bottom: 0;
         }
         /* Leave a space between table rows */
         tr + tr {
         margin-top: 1.5em;
         }
         /* Get table cells to act like rows */
         tr,
         td {
         display: block;
         }
         td {
         border: none;
         border-bottom: 0.125em solid #333;
         /* Leave a space for data labels */
         padding-left: 50%;
         }
         /* Add data labels */
         td:before {
         content: attr(data-label);
         display: inline-block;
         font-weight: bold;
         line-height: 1.5;
         margin-left: -100%;
         width: 100%;
         }
}
/* Stack labels vertically on smaller screens */
@media (max-width: 20em) {
         td {
         padding-left: 0.75em;
         }
         td:before {
         display: block;
         margin-bottom: 0.75em;
         margin-left: 0;
         }
}
         </style>

HTML код:
Код
<table>
  <thead>
  <tr>
  <th>uCoz Systems</th>
  <th>Yraaa.ru</th>
  <th>uGarts.pro</th>
  </tr>
  </thead>
  <tbody>
  <tr>
  <td data-label="uCoz Systems">Бесплатно</td>
  <td data-label="Yraaa.ru">Красиво</td>
  <td data-label="uGarts.pro">Надежно</td>
  </tr>
  <tr>
  <td data-label="uCoz Systems">Легко</td>
  <td data-label="Yraaa.ru">Бесплатно</td>
  <td data-label="uGarts.pro">Красиво</td>
  </tr>
  <tr>
  <td data-label="uCoz Systems">Надежно</td>
  <td data-label="Yraaa.ru">Легко</td>
  <td data-label="uGarts.pro">Бесплатно</td>
  </tr>
  <tr>
  <td data-label="uCoz Systems">Красиво</td>
  <td data-label="Yraaa.ru">Надежно</td>
  <td data-label="uGarts.pro">Легко</td>
  </tr>
  </tbody>
</table>

ПОСМОТРЕТЬ ДЕМО ЗАКАЗАТЬ УСТАНОВКУ

Скрипт опубликовал:
...
Логин на сайте: ...
Группа: ...
Статус: ...
Информация о скрипте:
Дата добавления материала: 20.10.2015 в 00:30
Материал просмотрен: 2152 раза
Категория материала: Скрипты для uCoz
К материалу оставлены: 3 комментария

Пожаловаться
Сказать спасибо

3 комментария


axios
Саша @axios 20.10.2015 01:511
+5
Полезная вещь, спасибо like
Ромчик
Всегда пожалуста
maks@@@
Нужная штука однако,выручил like
avatar
Вход через социальные сети
Работа в компании uCoz
uSocial - социальные кнопки
uLike – кнопка «Мне нравится»
Статистики нашего сайта