Прокрутка содержимого таблицы

Прокрутка содержимого таблицы

Чтобы сделать таблицу с фиксированной высотой и вертикальной прокруткой потребуется разделить её на две части.

В первой будет заголовок таблицы, во второй части, тело в контейнере со свойством overflow-x: auto.

<div class="scroll-table">
	<table>
		<thead>
			<tr>
				<th>Название блюда</th>
				<th>Белки</th>
				<th>Жиры</th>
				<th>Углеводы</th>
				<th>Ккал</th>
			</tr>
		</thead>
	</table>	
	<div class="scroll-table-body">
		<table>
			<tbody>
				<tr>
					<td>Азу</td>
					<td>11,9</td>
					<td>14,2</td>
					<td>10,2</td>
					<td>214</td>
				</tr>
				...
			</tbody>
		</table>
	</div>	
</div>
HTML

CSS-стили:

.scroll-table-body {
	height: 300px;
	overflow-x: auto;
	margin-top: 0px;
	margin-bottom: 20px;
	border-bottom: 1px solid #eee;
}
.scroll-table table {
	width:100%;
	table-layout: fixed;
	border: none;
}
.scroll-table thead th {
	font-weight: bold;
	text-align: left;
	border: none;
	padding: 10px 15px;
	background: #d8d8d8;
	font-size: 14px;
	border-left: 1px solid #ddd;
	border-right: 1px solid #ddd;
}
.scroll-table tbody td {
	text-align: left;
	border-left: 1px solid #ddd;
	border-right: 1px solid #ddd;
	padding: 10px 15px;
	font-size: 14px;
	vertical-align: top;
}
.scroll-table tbody tr:nth-child(even){
	background: #f3f3f3;
}

/* Стили для скролла */
::-webkit-scrollbar {
	width: 6px;
} 
::-webkit-scrollbar-track {
	box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
} 
::-webkit-scrollbar-thumb {
	box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
}
CSS

Результат:

17.12.2020, обновлено 16.03.2021
2826
Предыдущая запись Массив $_FILES

Комментарии

, чтобы добавить комментарий.

Другие публикации

Готовые CSS стили для таблиц
Подборка CSS-стилей для оформления таблиц.
11335
+3
Сортировка таблиц в PHP
Несколько примеров как вывести данные из БД в таблицу и добавить к ней возможность сортировки. Итак, простой вывод таблицы и базы...
2145
-1
Наведение курсора на ячейки, строки, колонки таблицы
Несколько способов как сделать выделение ячеек и рамок таблицы при наведении курсора. Во всех примерах верстка таблиц...
7201
+2
Рамка у отдельных ячеек таблицы
Метод добавления рамки к отдельным ячейкам, столбцам и строкам таблиц. К ячейке таблицы добавляются position: relative...
5043
-1
Как вместить большие таблицы на страницы сайта
Чтобы вместить большую таблицу, достаточно обернуть её в и добавить несколько CSS стилей, чтобы появился горизонтальный...
6046
+2
Перебор ячеек таблицы jQuery
Обойти ячейки таблицы можно с помощью jQuery метода each, например следующий код выводит текст из всех ячеек в консоль.
12322
+1