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

<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>

.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); 
}