JSFiddle - React, Tailwind, and code Playground

by AJIEKCEU

HTML

<div class="srav" id="doublescroll">
			<table>
				<thead>
					<tr>
						<th></th>
						<th><a href="#">Заголовок</a></th>
						<th><a href="#">Заголовок</a></th>
						<th><a href="#">Заголовок</a></th>
						<th><a href="#">Заголовок</a></th>
					</tr>
					
				</thead>
				<tbody>
					<tr class="vert1">
						<th class="infohead">Графический ускоритель</th>
						<td>nVidea</td>
						<td class="better">nVidea</td>
						<td class="better">nVidea</td>
						<td class="better">nVidea</td>
					</tr>
					<tr class="vert1">
						<th class="infohead">Графический ускоритель</th>
						<td>nVidea</td>
						<td class="better">nVidea</td>
						<td class="better">nVidea</td>
						<td class="better">nVidea</td>
					</tr>
					<tr class="vert1">
						<th class="infohead">Графический ускоритель</th>
						<td>nVidea</td>
						<td class="better">nVidea</td>
						<td class="better">nVidea</td>
						<td class="better">nVidea</td>
					</tr>
					<tr class="vert1">
						<th class="infohead">Графический ускоритель</th>
						<td>nVidea</td>
						<td class="better">nVidea</td>
						<td class="better">nVidea</td>
						<td class="better">nVidea</td>
					</tr>
					<tr class="vert1">
						<th class="infohead">Графический ускоритель</th>
						<td>nVidea</td>
						<td class="better">nVidea</td>
						<td class="better">nVidea</td>
						<td class="better">nVidea</td>
					</tr>
					<tr class="vert1">
						<th class="infohead">Графический ускоритель</th>
						<td>nVidea</td>
						<td class="better">nVidea</td>
						<td class="better">nVidea</td>
						<td class="better">nVidea</td>
					</tr>
<tr>
						<th class="infohead">Графический ускоритель</th>
						<td>nVidea</td>
						<td class="better">nVidea</td>
						<td class="better">nVidea</td>
						<td class="better">nVidea</td>
					</tr>
					<tr class="vert1">
						<th class="infohead">Графический ускоритель</th>
						<td>nVidea</td>
						<td class="better">nVidea</td>
						<td...

CSS

#doublescroll{
    position: relative;
    z-index: 15;
    overflow: auto;
    width:400px;
}
/*.top_scroll {
	height:20px;
	overflow-x:scroll;
}*/
.srav {
	margin:0 0 20px;
	padding:20px 0;
	color:#666;
}

.srav table {
    position: relative;
    z-index: 10;
}

.srav table th, .srav table td {
	padding:10px 20px;
    border-left: 1px solid #FFF;
}
.srav table td{
}
.srav table thead {
    
}
.srav table thead th {
	font-size:14px;
	text-transform:uppercase;
}
.srav table thead th a {
	text-decoration:none;
}
.srav table thead th img {
	display:block;
	margin:15px auto 0;
}
.srav table thead td {
	background:#e9eded;
	font-size:14px;
	font-weight:bold;
	color:#489925;
}
.srav table tbody {
}
.srav table tbody th {
	text-align:left;
	vertical-align:middle;
	border-top:1px solid #333;
}
.srav table tbody td {
	vertical-align:middle;
	border-top:1px solid #333;
	border-left:1px solid #333;
}
.srav table tbody tr:first-child th, .srav table tbody tr:first-child td {
	border-top:0;
}

JavaScript

var tbl = $('table');
var title = $('thead');
var titleClone = title.clone(true, true);
titleClone.prependTo(tbl).css({
    position: 'fixed',
    top: 0,
    left: tbl.offset().left,
    zIndex: 5,
    backgroundColor: '#efefef'
}).hide();
title.find('th').each(function(i,el){
    titleClone.find('th:eq(' + i + ')').width($(el).width());
});

$(document).scroll(function(){
    if($(this).scrollTop() > title.offset().top + title.height()){
        titleClone.show();
    } else {
        titleClone.hide();
    }
});

$('#doublescroll').scroll(function(){
    titleClone.css('left', - $(this).scrollLeft());
});