Фиксированная шапка для таблицы html, готовое решение, забирай

Очень удобно для длинных таблиц-портянок на html делать фиксированную шапку, чтобы при прокрутке таблицы не терять понимания значения столбцов и, следовательно, не теряться в них.
Фиксированная шапка для таблицы html можно сделать несколькими вариантами, но не все они просты в реализации и удобны в использовании.

Содержание

Пример оптимально варианта реализации фиксированной шапки для таблицы
Важные пояснения реализации фиксированной шапки
Html код таблицы с фиксированной шапкой
Css стили таблицы с фиксированной шапкой

Пример оптимально варианта реализации фиксированной шапки для таблицы



// Внимание! jQuery должен быть подключен на странице
// Прокручиваемая шапка для длинных таблиц
// создаем копию шапки
if ($('table#haveFixedHead')){
setThWidthCalledOnce = false;
$('body').append('<table class="in-table br-all pd5 headscroll"></table>');
$('#haveFixedHead thead').clone().appendTo('table.headscroll');</code>

// показываем и убираем
$(window).scroll(function (e) {
tablepos = $('#haveFixedHead').offset();
if (window.pageYOffset > tablepos.top) {
if (!setThWidthCalledOnce) // вызываем установку ширины столбцов только один раз
setThWidth();
$('.headscroll').css('display', 'table');
$('.headscroll').css('width', $('#haveFixedHead').width()+'px');
$('.headscroll').css('left', tablepos.left+'px');
$('.headscroll th').css('line-height', $('#haveFixedHead th').css('line-height'));
}else{
// скрываем прокручиваемую шапку
$('.headscroll').css('display', 'none');
}

// устанавливаем одинаковую ширину столбцов
function setThWidth() {
$('#haveFixedHead th').each(function(i, el){
$('.headscroll th').eq(i).css('width', $(el).width()+'px');
});
setThWidthCalledOnce = true;
}
});
}

Важные пояснения реализации фиксированной шапки
Единственное, что тут нужно особенно пояснить - это то, что функция setThWidth() вызывается внутри события scroll для того, чтобы правильно рассчитать ширину столбцов. Если вызвать её при создании документа, то ширина столбцов будет рассчитана не верно и наши шапки не будут идентичными.
Html код таблицы с фиксированной шапкой
При этом HTML код выглядит следующим образом:



<table class="headscroll"  cellspacing="0" cellpadding="0" border="0">
<thead>
<tr>
<th align='center'>Заголовок 1</th>
<th align='center'>Заголовок 2</th>
<th align='center'>Заголовок 3</th>
</tr>
</thead>
</table></code>

<table id="haveFixedHead"  cellspacing="0" cellpadding="0" border="0">
<thead>
<tr>
<th align='center'>Заголовок 1</th>
<th align='center'>Заголовок 2</th>
<th align='center'>Заголовок 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>text 1</td>
<td>text 2</td>
<td>text 3</td>
</tr>
<tr>
<td>text 1</td>
<td>text 2</td>
<td>text 3</td>
</tr>
<tr>
<td>text 1</td>
<td>text 2</td>
<td>text 3</td>
</tr>
<!--Копируем строки пока не появится прокрутка страницы-->
</tbody>
</table>

Css стили таблицы с фиксированной шапкой
Ну и CSS стили для липкой шапки в части обязательных правил будет выглядеть так:



<style type="text/css">
table thead {background: #333; color: #fff;}
/*head scrolling for long tables*/
table.headscroll {
display: none;
position: fixed;
top: 0;
margin: 0;
z-index: 1;
}
/*end head scrolling for long tables*/
</style>



Итак, наша липкая шапка готова, теперь пользователь не потеряется в названии столбцов.


Предыдущая запись Действие по завершению нескольких асинхронных запросов 
 Следующая запись Свой TITLE и H1 для страниц и инфоблоков bitrix

Комментарии: 2

Радмир 22.03.2016 в 09:39

а ты проверялсвой способ ? что то ява скрипт не работает

Ответить
Администратор (автор) 26.12.2016 в 23:59

Да, действительно была опечатка и скрипт не работал, спасибо за замечание. Сейчас все исправлено и протестировано, метод рабочий.

Ответить

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