JSFiddle - React, Tailwind, and code Playground

HTML

<header>
<a href="/datacentre/index.php" title="Return to the homepage" id="logo">
  <img src="/datacentre/images/cagd_logo.jpg" alt="CAGD logo" 
  style="width:30px;height:30px;"/>
</a>

<span class="headerspan">CAGD Data Centre</span>

<a href="/datacentre/webhelp/index.htm" title="Return to the homepage" id="helpfile">
  help
</a>

    <section id="content">
        <div class="outer-container">
            <div class="inner-container">
                <div class="table-header">
                    <table id="headertable">
                        <thead>
                            <tr>
                                <th class="header-cell col1">One</th>
                                <th class="header-cell col2">Two</th>
                                <th class="header-cell col3">Three</th>
                                <th class="header-cell col4">Four</th>
                                <th class="header-cell col5">Five</th>
                            </tr>
                        </thead>
                    </table>
                </div>
                <div class="table-body">
                    <table id="bodytable">
                        <tbody>
                            <tr>
                                <td class="body-cell col1">body row1</td>
                                <td class="body-cell col2">body row2</td>
                                <td class="body-cell col3">body row2</td>
                                <td class="body-cell col4">body row2</td>
                                <td class="body-cell col5">body row2 en nog meer</td>
                            </tr>
                            <tr>
                                <td class="body-cell col1">body row1</td>
                                <td class="body-cell col2">body row2</td>
                                <td class="body-cell col3">body row2</td>
                                <td class="body-cell col4">body row2</td>
                               ...

CSS

* {
    padding: 0;
    margin: 0;
}
body {
    height: 100%;
    width: 100%;
}
table {
    border-collapse: collapse;
}
.outer-container {
    background-color: #ccc;
    position: absolute;
    top: 5em;
    left: 160px;
    right: 200em;
    bottom: 40em;
    height:200px;
    width:500px;
}
.inner-container {
    height: 100%;
    overflow: hidden;
    position:relative;
}
.table-header {
    position: relative;
}
.table-body {
    overflow: auto;
}
.header-cell {
    background-color: yellow;
    text-align: left;
    height: 40px;
}
.body-cell {
    background-color: blue;
    text-align: left;
}
.col1, .col3, .col4, .col5 {
    width: 120px;
    min-width: 120px;
}
.col2 {
    min-width: 300px;
}

JavaScript

function setTableBody() {
    $(".table-body").height(
    $(".inner-container").height() - $(".table-header").height());
}

$(document).ready(function () {
    setTableBody();
    $(window).resize(setTableBody);
    $(".table-body").scroll(function () {
        $(".table-header").offset({
            left: 160 - this.scrollLeft
        });
    });
});