Создание прокручивающейся таблицы товаров

Демонстрация работы прокручивающейся таблицы товаров, адаптация примера из урока Dudley Storey, специально для сайта dejurka.ru

HTML

<table class="comparer">
<thead>
<tr>
<th>Упаковка</th>
<th>Производитель</th>
<th>Название</th>
<th>Частота</th>
<th>Ядра</th>
<th>Кэш</th>
<th>Цена</th>
</tr>
</thead>
<tfoot>
<tr><td colspan="7"></td>
</tr>
</tfoot>
<tbody>
<tr>
<td><img src="http://thenewcode.com/assets/images/amd-opteron.jpg" alt="AMD Opteron 6172 Twelve-Core 2.1GHz w/ 18MB Cache">
</td>
<td>AMD</td>
<td>Opteron 6172</td>
<td>2.1 GHz</td>
<td>12</td>
<td>18 MB</td>
<td>$1,199.99
</td>
</tr>
<tr>
<td><img src="http://thenewcode.com/assets/images/i7-3960X.jpg" alt="Intel Core™ i7-3960X Processor Extreme Edition 3.30GHz w/ 15MB Cache"></td>
<td>Intel</td>
<td>Core i7-3960X</td>
<td>3.3 GHz</td>
<td>6</td>
<td>15 MB</td>
<td>$1,049.99</td>
</tr>
<tr>
<td><img src="http://thenewcode.com/assets/images/i7-990X.jpg" alt="Core™ i7-990X Processor Extreme Edition 3.46GHz w/ 12MB Cache"></td>
<td>Intel</td>
<td>Core i7-990X</td>
<td>3.46 GHz</td>
<td>6</td>
<td>12 MB</td>
<td>$899.99</td>
</tr>
<tr>
<td><img src="http://thenewcode.com/assets/images/amd-opteron.jpg" alt="Opteron 6168 Twelve-Core 1.9GHz w/ 18MB Cache"></td>
<td>Intel</td>
<td>Opteron 6168</td>
<td>1.9 GHz</td>
<td>12</td>
<td>18 MB</td>
<td>$849.99</td>
</tr>
<tr>
<td><img src="http://thenewcode.com/assets/images/amd-opteron.jpg" alt="Opteron 6134 Eight-Core 2.3GHz w/ 12MB Cache"></td>
<td>AMD</td>
<td>Opteron 6134</td>
<td>2.3 GHz</td><td>8
</td>
<td>12 MB</td>
<td>$619.99</td>
</tr>
<tr>
<td><img src="http://thenewcode.com/assets/images/i7-3930K.jpg" alt="Core i7-3930K Processor, 3.20GHz w/ 12MB Cache"></td>
<td>Intel</td
><td>i7-3930K</td>
<td>3.2 GHz</td>
<td>6</td>
<td>12 MB</td>
<td>$569.99</td>
</tr>
</tbody>
</table>

CSS

table {
	border-collapse: collapse;
	box-sizing: border-box;
}
td img { 
	width: 100px;
	height: 100px;
}
table, thead, tbody {
	display: block;
	position: relative;
}
thead, tbody, tfoot {
	width: 700px;
}
th, td {
	padding: 1.2rem;
}
thead {
	background-image:
		linear-gradient(rgba(255,255,255,1) 70%, 	
		rgba(255,255,255,0)); 
		z-index: 2;
}
tbody {
	height: 270px;
	overflow: auto;
	overflow-x: hidden;
	margin-top: -20px;
}
tfoot {
	background:
		linear-gradient(rgba(255,255,255,0) 30%, 	
		rgba(255,255,255,1));
		position: absolute;
		bottom: 0;
		height: 20px;
		z-index: 3;
}