CSS — Резиновая таблица

Опишу несколько скриптов которые использую для создания резиновой таблицы в верстке.

  1. StackTable.js
    Скрипт создает вторую таблицу для узких экранов (основная таблица скрывается), таблица становится в две колоноки и первая из них это thead th нашей основной таблицы.
    Инструкция и примеры на странице скрипта StackTable.js
    Тот же принцип таблицы для Angular.
  2. Responsive Tables from ZUBR
    Этот скрипт оставляет первую колонку фиксированной остальные проматываются как слайд.
    Хорошая статья о задумки скрипта (на английком)
    CSS - Резиновая таблица
  3. Самый простой вариант это воспользоваться Bootstrap. Таблица срабатывает на узких экранах как в предыдущем случае но без фиксированной колонки. Все работает на чистом CSS.
  4. Для тех кто хочет сделать совсем крутую таблицу предлагаю по пробывать использовать этот скрипт. У него много вариаций вывода таблиц, думаю вы найдете себе лучший вариант.CSS - Резиновая таблица
  5. На чистом CSS

    Гикая таблица на чистом CSS

CSS — Резиновая таблица
5 (100%) 1 vote

CSS, UI Design
Если вам понравилось эта функция (стиль, анимация и т.д опубликованное на этой странице) но вы не знаете как внедрить её на ваш сайт или приложение, то автор сайта предлагает платные услуги по установке и настройки данной функции. Более подробная информация и контакты вы найдете на странице услуги.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *