JSFiddle - React, Tailwind, and code Playground

by ovfiddle

HTML

<div id="table-container">

</div>

CSS

#table-container {overflow-x:scroll;width:300px;}

tbody{display:block;overflow-y:auto;height:200px;}
thead{display:block;color:blue;background:#eee;}
th, td {width:50px;padding:0;margin:0;border-right:1px solid #eee;border-bottom:1px solid #eee;}

th {color:red;position:relative;left:0;background:#eee;}

JavaScript

$('#table-container').append(makeTable(15,40)).scroll(function() {
    var _left = $(this).scrollLeft();
    $('#table th').css('left', _left);
});

//just generate the html, nothing fancy!
function makeTable(cols, rows) {
    var x, y, html = '<table id="table" style="width:'+(cols+1)*50+'px"><thead><tr><th>#</th>';
    for (x = 1; x <= cols; x++) {
        html += '<td>' + x + '</td>';
    }
    html += '</tr></thead><tbody>';
    for (y = 1; y <= rows; y++) {
        html += '<tr><th>' + y + '</th>';
        for (x = 1; x <= cols; x++) {
            html += '<td>' + y + ':' + x + '</td>';
        }
        html += ' </tr>';
    }
    html += '</tbody></table>';
    return html;
}