Главная jQuery Фиксированный заголовок таблицы HTML

Фиксированный заголовок таблицы HTML

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

Наверное, вы уже догадались, что первая таблица будет использоваться для отображения именно фиксированной части заголовка. Вторая – будет отображать само содержимое таблиц. Для разделения таблиц так же будут использованы блоки div, и для задания одинаковых размеров для ячеек таблиц будут использованы общие атрибуты в CSS. Для второй таблицы будет доступен скроллинг, таким образом, она будет скролиться по отношению к первой таблице.

HTML разметка таблицы

<section>
<!--for demo wrap-->
<h1>Fixed Table header</h1>
<div class="tbl-header">
<table cellpadding="0" cellspacing="0" border="0">
  <thead>
	<tr>
	  <th>Code</th>
	  <th>Company</th>
	  <th>Price</th>
	  <th>Change</th>
	  <th>Change %</th>
	</tr>
  </thead>
</table>
</div>
<div class="tbl-content">
<table cellpadding="0" cellspacing="0" border="0">
  <tbody>
	<tr>
	  <td>AAC</td>
	  <td>AUSTRALIAN COMPANY </td>
	  <td>$1.38</td>
	  <td>+2.01</td>
	  <td>-0.36%</td>
	</tr>
	<tr>
	  <td>AAD</td>
	  <td>AUSENCO</td>
	  <td>$2.38</td>
	  <td>-0.01</td>
	  <td>-1.36%</td>
	</tr>
	<tr>
	  <td>AAX</td>
	  <td>ADELAIDE</td>
	  <td>$3.22</td>
	  <td>+0.01</td>
	  <td>+1.36%</td>
	</tr>
	<tr>
	  <td>XXD</td>
	  <td>ADITYA BIRLA</td>
	  <td>$1.02</td>
	  <td>-1.01</td>
	  <td>+2.36%</td>
	</tr>
	<tr>
	  <td>AAC</td>
	  <td>AUSTRALIAN COMPANY </td>
	  <td>$1.38</td>
	  <td>+2.01</td>
	  <td>-0.36%</td>
	</tr>
	<tr>
	  <td>AAD</td>
	  <td>AUSENCO</td>
	  <td>$2.38</td>
	  <td>-0.01</td>
	  <td>-1.36%</td>
	</tr>
	<tr>
	  <td>AAX</td>
	  <td>ADELAIDE</td>
	  <td>$3.22</td>
	  <td>+0.01</td>
	  <td>+1.36%</td>
	</tr>
	<tr>
	  <td>XXD</td>
	  <td>ADITYA BIRLA</td>
	  <td>$1.02</td>
	  <td>-1.01</td>
	  <td>+2.36%</td>
	</tr>
	<tr>
	  <td>AAC</td>
	  <td>AUSTRALIAN COMPANY </td>
	  <td>$1.38</td>
	  <td>+2.01</td>
	  <td>-0.36%</td>
	</tr>
	<tr>
	  <td>AAD</td>
	  <td>AUSENCO</td>
	  <td>$2.38</td>
	  <td>-0.01</td>
	  <td>-1.36%</td>
	</tr>
	<tr>
	  <td>AAX</td>
	  <td>ADELAIDE</td>
	  <td>$3.22</td>
	  <td>+0.01</td>
	  <td>+1.36%</td>
	</tr>
	<tr>
	  <td>XXD</td>
	  <td>ADITYA BIRLA</td>
	  <td>$1.02</td>
	  <td>-1.01</td>
	  <td>+2.36%</td>
	</tr>
	<tr>
	  <td>AAC</td>
	  <td>AUSTRALIAN COMPANY </td>
	  <td>$1.38</td>
	  <td>+2.01</td>
	  <td>-0.36%</td>
	</tr>
	<tr>
	  <td>AAD</td>
	  <td>AUSENCO</td>
	  <td>$2.38</td>
	  <td>-0.01</td>
	  <td>-1.36%</td>
	</tr>
	<tr>
	  <td>AAX</td>
	  <td>ADELAIDE</td>
	  <td>$3.22</td>
	  <td>+0.01</td>
	  <td>+1.36%</td>
	</tr>
	<tr>
	  <td>XXD</td>
	  <td>ADITYA BIRLA</td>
	  <td>$1.02</td>
	  <td>-1.01</td>
	  <td>+2.36%</td>
	</tr>
	<tr>
	  <td>AAC</td>
	  <td>AUSTRALIAN COMPANY </td>
	  <td>$1.38</td>
	  <td>+2.01</td>
	  <td>-0.36%</td>
	</tr>
	<tr>
	  <td>AAD</td>
	  <td>AUSENCO</td>
	  <td>$2.38</td>
	  <td>-0.01</td>
	  <td>-1.36%</td>
	</tr>
	<tr>
	  <td>AAX</td>
	  <td>ADELAIDE</td>
	  <td>$3.22</td>
	  <td>+0.01</td>
	  <td>+1.36%</td>
	</tr>
	<tr>
	  <td>XXD</td>
	  <td>ADITYA BIRLA</td>
	  <td>$1.02</td>
	  <td>-1.01</td>
	  <td>+2.36%</td>
	</tr>
	<tr>
	  <td>AAC</td>
	  <td>AUSTRALIAN COMPANY </td>
	  <td>$1.38</td>
	  <td>+2.01</td>
	  <td>-0.36%</td>
	</tr>
	<tr>
	  <td>AAD</td>
	  <td>AUSENCO</td>
	  <td>$2.38</td>
	  <td>-0.01</td>
	  <td>-1.36%</td>
	</tr>
	<tr>
	  <td>AAX</td>
	  <td>ADELAIDE</td>
	  <td>$3.22</td>
	  <td>+0.01</td>
	  <td>+1.36%</td>
	</tr>
	<tr>
	  <td>XXD</td>
	  <td>ADITYA BIRLA</td>
	  <td>$1.02</td>
	  <td>-1.01</td>
	  <td>+2.36%</td>
	</tr>
	<tr>
	  <td>AAC</td>
	  <td>AUSTRALIAN COMPANY </td>
	  <td>$1.38</td>
	  <td>+2.01</td>
	  <td>-0.36%</td>
	</tr>
	<tr>
	  <td>AAD</td>
	  <td>AUSENCO</td>
	  <td>$2.38</td>
	  <td>-0.01</td>
	  <td>-1.36%</td>
	</tr>
	<tr>
	  <td>AAX</td>
	  <td>ADELAIDE</td>
	  <td>$3.22</td>
	  <td>+0.01</td>
	  <td>+1.36%</td>
	</tr>
	<tr>
	  <td>XXD</td>
	  <td>ADITYA BIRLA</td>
	  <td>$1.02</td>
	  <td>-1.01</td>
	  <td>+2.36%</td>
	</tr>
	<tr>
	  <td>AAC</td>
	  <td>AUSTRALIAN COMPANY </td>
	  <td>$1.38</td>
	  <td>+2.01</td>
	  <td>-0.36%</td>
	</tr>
	<tr>
	  <td>AAD</td>
	  <td>AUSENCO</td>
	  <td>$2.38</td>
	  <td>-0.01</td>
	  <td>-1.36%</td>
	</tr>
	<tr>
	  <td>AAX</td>
	  <td>ADELAIDE</td>
	  <td>$3.22</td>
	  <td>+0.01</td>
	  <td>+1.36%</td>
	</tr>
	<tr>
	  <td>XXD</td>
	  <td>ADITYA BIRLA</td>
	  <td>$1.02</td>
	  <td>-1.01</td>
	  <td>+2.36%</td>
	</tr>
  </tbody>
</table>
</div>
</section>

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

CSS стили таблицы

table {
	width:100%;
	table-layout: fixed;
}
.tbl-header {
	background-color: rgba(255,255,255,0.3);
}
.tbl-content {
	height:300px;
	overflow-x:auto;
	margin-top: 0px;
	border: 1px solid rgba(255,255,255,0.3);
}
th {
	padding: 20px 15px;
	text-align: left;
	font-weight: 500;
	font-size: 12px;
	color: #fff;
	text-transform: uppercase;
}
td {
	padding: 15px;
	text-align: left;
	vertical-align:middle;
	font-weight: 300;
	font-size: 12px;
	color: #fff;
	border-bottom: solid 1px rgba(255,255,255,0.1);
}
 
 
/* demo */
@import url(https://fonts.googleapis.com/css?family=Roboto:400,500,300,700);
body{
	background: -webkit-linear-gradient(left, #25c481, #25b7c4);
	background: linear-gradient(to right, #25c481, #25b7c4);
	font-family: 'Roboto', sans-serif;
}
section{
	margin: 50px;
}
 
 
::-webkit-scrollbar {
	width: 6px;
} 
::-webkit-scrollbar-track {
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
} 
::-webkit-scrollbar-thumb {
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
}

Так же для правильного отображения таблицы при ресайзинге мы воспользуемся простым Javascript-кодом:

$(window).on("load resize ", function() {
	var scrollWidth = $('.tbl-content').width() - $('.tbl-content table').width();
	$('.tbl-header').css({'padding-right':scrollWidth});
}).resize();

Наглядный пример того что получилось вы можете просмотреть на демо-странице ссылка которой будет ниже. Если это показалось вам сложным решением, то не стоит раньше времени расстраиваться, попробуйте реализовать это дело самим, и вы поймете, что нет ничего сложного. Касательно темы таблиц так же рекомендую к прочтению статью о сортируемых таблицах Data Tables.
Демо | Скачать в архиве

Опубликован: 27.08.2017 г.