JSFiddle - React, Tailwind, and code Playground

by Marc Malignan

HTML

<div id="container">
    <div id="wrapper">

        <table id="header">
            <thead>
                <tr>
                    <th style="width:60px">Colonne 1</th>
                    <th style="width:60px">Col 2</th>
                    <th style="width:150px">Colonne très longue 3</th>
                    <th style="width:60px">Colonne 4</th>
                    <th style="width:100px">Colonne 5</th>
                    <th style="width:60px">Colonne 6</th>
                </tr>
            </thead>
        </table>
        
        <div id="scrollY">
            <table id="body">
                <tbody>
                    <tr><td>TEST1</td><td>TEST2</td><td>TEST3</td><td>TEST4</td><td>TEST5</td><td>TEST6</td></tr>
                    <tr><td>TEST1</td><td>TEST2</td><td>TEST3</td><td>TEST4</td><td>TEST5</td><td>TEST6</td></tr>
                    <tr><td>TEST1</td><td>TEST2</td><td>TEST3</td><td>TEST4</td><td>TEST5</td><td>TEST6</td></tr>
                    <tr><td>TEST1</td><td>TEST2</td><td>TEST3</td><td>TEST4</td><td>TEST5</td><td>TEST6</td></tr>
                    <tr><td>TEST1</td><td>TEST2</td><td>TEST3</td><td>TEST4</td><td>TEST5</td><td>TEST6</td></tr>
                    <tr><td>TEST1</td><td>TEST2</td><td>TEST3</td><td>TEST4</td><td>TEST5</td><td>TEST6</td></tr>
                    <tr><td>TEST1</td><td>TEST2</td><td>TEST3</td><td>TEST4</td><td>TEST5</td><td>TEST6</td></tr>
                    <tr><td>TEST1</td><td>TEST2</td><td>TEST3</td><td>TEST4</td><td>TEST5</td><td>TEST6</td></tr>
                    <tr><td>TEST1</td><td>TEST2</td><td>TEST3</td><td>TEST4</td><td>TEST5</td><td>TEST6</td></tr>
                    <tr><td>TEST1</td><td>TEST2</td><td>TEST3</td><td>TEST4</td><td>TEST5</td><td>TEST6</td></tr>
                    <tr><td>TEST1</td><td>TEST2</td><td>TEST3</td><td>TEST4</td><td>TEST5</td><td>TEST6</td></tr>
                    <tr><td>TEST1</td><td>TEST2</td><td>TEST3</td><td>TEST4</td><td>TEST5</td><td>TEST6</td></tr>
       ...

CSS

body {
    margin: 0;
}

table {
    border-collapse: collapse;
    text-align: left;
    table-layout: fixed;
}
td, th {
    padding: 5px 10px;
    white-space: nowrap;
}

#container {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
}

#wrapper {
    display: inline-block;
    min-width: 100%;
}

#scrollY {
    position: absolute;
    top: 30px;
    width: 100%;
    height: 330px;
    overflow-y: auto;
    overflow-x: hidden;
}

#header, #footer {
    background: coral;
}
#header {
    margin-bottom: 330px;
}

JavaScript

var resizeTimer = null;

function sync() {
    var header = $('#header');
    var body = $('#body');
    var footer = $('#footer');
    
    var cols = header.find('th');
    
    var wContainer = $('#container').width();
    header.width(wContainer);
    body.width(wContainer);
    footer.width(wContainer);
    
    for(var i=0; i<cols.length; i++) {
        var w = $(cols[i]).width();
        body.find('td:nth-child('+(i+1)+')').width(w);
        footer.find('td:nth-child('+(i+1)+')').width(w);
    }
}

function sameScroll() {
    var s = $(this).scrollLeft();
    $('#scrollY').scrollLeft(s);
}

sync();
$(window).resize(function() {
    if(resizeTimer) clearTimeout(resizeTimer);
    resizeTimer = setTimeout(sync, 100);
});
$('#container').scroll(sameScroll);