JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
    <h3>my table</h3>
    <div class="sticky-table">
        <table>
            <tr class="head">
                <th>Name</th>
            </tr>
         </table>
        <div class="scroll">
            <table class="data">
            </table>
        </div>
    </div>
</div>

CSS

.container {
    width: 400px;
    height: 400px;
}

.sticky-table {
    width: 100%;
    height: 100%;
    overflow: scroll;
    border: 1px solid black;
    border-top: none;
}

table {
    table-layout: fixed;
    border-collapse: collapse;
    min-width: 100%;
}

th, td {
    border: 1px solid black;
}

tr:first-child td {
    border-top: none;
}

tr:last-child td {
    border-bottom: none;
}

th:first-child, td:first-child {
    border-left: none;
}

th:last-child, td:last-child {
    border-right: none;
}

th {
    height: 30px;
    white-space: nowrap;
}

th, td {
    min-width: 80px;
    width: 80px;
}

.head {
    background-color: lightblue;
}

.scroll {
    float: left; /* Makes with total content width */
    min-width: 100%; /* In case there isn't enough columns */
    height: calc(100% - 35px); /* Assuming we know head height */
    overflow: scroll;
}

JavaScript

// Javascript used only for generating data.
var columns = 10;
var rows = 50;

var $head = $('.head');
for (var i = 0; i < columns; i++) {
    $('<th>').text('Col ' + (i + 1)).appendTo($head);
}

var $data = $('.data');
var names = [
    'Britain',
    'United States',
    'Canada',
    'Apples',
    'The Internet',
    'Golden',
    'Hello',
    'For You',
    'Time Magazine'
];
var rownames = [];
for (i = 0; i < rows; i++) {
    rownames.push(names[i % names.length]);
}

rownames.forEach(function(name) {
    var $tr = $('<tr>');
    $('<td>').text(name).appendTo($tr);
    for (var i = 0; i < columns; i++) {
        $('<td>').text(~~(Math.random() * 10000)).appendTo($tr);
    }
    $data.append($tr);
});