регистрация
856материалов
3343комментария
239тем на форуме
7069пользователей

Адаптивная 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
Материал просмотрен: 3210 раз
Категория материала: Скрипты для uCoz
К материалу оставлены: 3 комментария

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

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


axios
Саша @axios 20.10.2015 01:511
+5
Полезная вещь, спасибо
Ромчик
Всегда пожалуста
maks@@@
Нужная штука однако,выручил
avatar
-50% на шаблоны от TemplateMonster
Создать сайт вместе с uKit.com
Статистики нашего сайта
Правила чата
Пользователи онлайн
Закрыть мини-чат
+Открыть мини-чат
0
Онлайн всего: 4
Гостей: 4
Пользователей: 0