Exore LTD » jQuery » Красивый плавающий заголовок у таблицы
Лого SiteHere.ru

Март 12, 2014

Время чтения: 2 мин. Прочитать позже

Красивый плавающий заголовок у таблицы

Красивый плавающий заголовок у таблицы

Таблицы служат для компактного размещения большого объема данных. А на красиво оформленные таблицы смотреть намного приятнее, чем на те, свойства которых заданы по умолчанию браузером. Также есть такой нюанс: когда таблица большая и не влезает на всю высоту экрана при прокручивании можно забыть для чего предназначен тот или иной столбец. Поэтому в этом уроке мы создадим красивый плавающий заголовок таблицы, которые при прокручивании окна будет перемещаться вверху, тем самым делая просмотр более удобным для пользователя.

Таблицы можно будет прокручивать также по горизонтали, а первая колонка с текстом, будет также плавно следовать слева.

Вообще, легче увидеть и понять что я здесь хочу вам сказать 🙂 . Пример таблиц с плавающими колонками и заголовком можно увидеть здесь:

Посмотреть примерСкачать



HTML часть

Ничего необычного в структуре таблицы нет. Она состоит из тех же блоков как и всегда:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

<table>
    <thead>
        <tr>
            <th></th>
            <th></th>
            <th></th>
        </tr>
    </thead>
    <tbody>
        ...
        <tr>
            ...
            <td></td>
            <td></td>
            <td></td>
            ...
        </tr>
        <tr>
            ...
            <td></td>
            <td></td>
            <td></td>
            ...
        </tr>
       ...
    </tbody>
</table>


CSS часть

Добавим стилей нашей таблице:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

table {
    margin: 0 auto 1.5em;
    width: 75%;
}
.sticky-wrap {
    overflow-x: auto;
    position: relative;
    margin-bottom: 1.5em;
    width: 100%;
}
.sticky-wrap .sticky-thead,
.sticky-wrap .sticky-col,
.sticky-wrap .sticky-intersect {
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    transition: all .125s ease-in-out;
    z-index: 50;
    width: auto;
}
.sticky-wrap .sticky-thead {
    box-shadow: 0 0.25em 0.1em -0.1em rgba(0,0,0,.125);
    z-index: 100;
    width: 100%;
}
.sticky-wrap .sticky-intersect {
    opacity: 1;
    z-index: 150;
}
.sticky-wrap .sticky-intersect th {
    background-color: #666;
    color: #eee;
}
.sticky-wrap td,
.sticky-wrap th {
    box-sizing: border-box;
}


Javascript часть

Здесь нам необходимо лишь подключить один плагин(скачать ее можно здесь):

1

<script src="js/jquery.stickyheader.js"></script>


Вывод

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


Успехов!

Источник: http://tympanus.net/codrops/2014/01/09/sticky-table-headers-columns/

Еще материалы по этой теме

Спасибо за ваше обращение!

Мы свяжемся с вами в течение 2-х часов (график работы: пн-пт, с 10 до 19)

1 комментарий к записи
  • Вячеслав

    Прикольно для документации на сайт пригодится;)

     
    Ответить

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

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