Реализация справочной таблицы

demosourse

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

Независимо от того какую информацию вы помещаете в таблицу, главное позаботиться об адаптивности. На некоторых сайтах можно наблюдать, как разработчики просто напросто отсекают некоторые колонки, но это не самый лучший выход. Более подходящий пример — вертикальная прокрутка таблицы!

Теперь отвечу на вопрос почему лучше избежать стандартной табличной HTML структуры, а вместо это воспользоваться ненумерованными списками? Всё дело в обеспечении адаптивности. В случае использования таблиц — данная задача становится трудноразрешимой.

Создание структуры

Воспользуемся элементом <section> в качестве контейнера таблицы. Шапка таблицы будет находиться в отдельном <div> потому что при отображении на мобильных устройствах, она должна быть прикреплена к верхней части экрана.

По сути каждая колонка будет элементом списка.

<section>
    <header>
        <h2>Features</h2>
        <ul>
            <li>Feature 1</li>
            <li>Feature 2</li>
            <li>...</li>
        </ul>
    </header>

    <div class="cd-table-container">
        <div class="cd-table-wrapper">

            <div class="cd-table-column">
                <h2>Plan 1</h2>
                <ul>
                    <li>1 GB</li>
                    <li>2</li>
                    <li>...</li>
                </ul>
            </div> <!-- cd-table-column -->

            <div class="cd-table-column">
                <h2>Plan 2</h2>
                <ul>
                    <li>2 GB</li>
                    <li>5</li>
                    <li>...</li>
                </ul>
            </div> <!-- cd-table-column -->

        </div> <!-- cd-table-wrapper -->
    </div> <!-- cd-table-container -->
</section>

Стили

В CSS стоит отметить только одну вещь: колонки помещены в 2 <div>, .cd-table-container и .cd-table-wrapper. Почему в два? Потому как ширина первого равна 90% и overflow-x:auto, в то время как ширина второго рассчитывается в качестве суммы всех колонок. Это позволяет получить небольшой отступ с правой стороны, и осуществить прокрутку контента.

Обработка событий

С помощью jQuery мы удалим небольшую стрелку которая сообщит о возможности прокрутки.

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: https://codyhouse.co/gem/cross-reference-table/
Перевел: Станислав Протасевич
Урок создан: 11 Февраля 2016
Просмотров: 5609
Правила перепечатки


5 последних уроков рубрики "CSS"

^ Наверх ^