Яндекс.Метрика

Дизайн-журнал №1. Актуальная информация для дизайнеров, веб дизайнеров, программистов и разработчиков сайтов.

Создание прокручивающейся таблицы товаров

18 января 2017 | Опубликовано в css | 1 Комментарий »

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

 

 

Давайте рассмотрим разметку и код CSS для таблицы.

Код HTML довольно очевиден: раздел шапки таблицы <thead> с названиями столбцов, основное содержимое таблицы <tbody>, в этом случае это центральные процессоры, и подвал таблицы <tfoot>. Довольно необычно, что подвал таблицы расположен в коде до основного содержимого, но в браузере автоматически появляется под ним. В этом примере в подвале нет данных и он играет исключительно декоративную роль.

<table>
        <thead>
                <tr>
                        <th>Package
                        <th>Manufacturer
                        <th>Name
                        <th>Speed
                        <th>Cores
                        <th>Cache
                        <th>Price
        <tfoot>
                <tr>
                        <td colspan=6>
        <tbody>
                <tr>
                        <td><img src=amd-opteron.jpg alt="AMD Opteron 6172 Twelve-Core 2.1GHz">
                        <td>AMD
                        <td>Opteron 6172
                        <td>2.1 GHz
                        <td>12
                        <td>18 MB
                        <td>$1,199.99
                <tr>
                        <td><img src=i7-3960X.jpg alt="Intel Core i7-3960X Processor">
                        <td>Intel
                        <td>Core i7-3960X
                        <td>3.3 GHz
                        <td>6
                        <td>15 MB
                        <td>$1,049.99
                …
</table>

Как шапка, так и подвал таблицы содержат вертикальные градиенты от белого к прозрачному и в обратном порядке в подвале. Чтобы содержимое таблицы прокручивалось вертикально, нужно проделать четыре следующие действия:

  1. Задать содержимому таблицы отображение блоком.
  2. Ограничить высоту определенным значением.
  3. Выбрать автоматическое значение свойству всплытия.
  4. Спрятать лишнее с помощью свойства всплытия по оси X.

Весь код CSS без приставок производителей, которые и не нужны для большинства современных версий браузеров, для линейных градиентов представлен ниже:

table {
        border-collapse: collapse;
        box-sizing: border-box;
}
td img {
        width: 100px;
        height: 100px;
}
table, thead, tbody {
        display: block;
        position: relative;
}
thead, tbody, tfoot {
        width: 700px;
}
th, td {
        padding: 1.2rem;
}
thead {
        background-image:
                linear-gradient(rgba(255,255,255,1) 70%,
                rgba(255,255,255,0));
                z-index: 2;
}
tbody {
        height: 270px;
        overflow: auto;
        overflow-x: hidden;
        margin-top: -20px;
}
tfoot {
        background:
                linear-gradient(rgba(255,255,255,0) 30%,
                rgba(255,255,255,1));
                position: absolute;
                bottom: 0;
                height: 20px;
                z-index: 3;
}

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

Автор урока Dudley Storey

Перевод — Дежурка

Смотрите также:


�


Комментарии

Похожие статьи

Случайные статьи



Друзья

    • Самые комментируемые