JSFiddle - React, Tailwind, and code Playground

HTML

<button type="button" onclick="truncate();">Shrink content!</button>
<div id="table-container">
    <div id="example_wrapper">
        <div id="wrapper">
            <table id="example">
                <thead>
                    <tr>
                        <th>[Header for Column 1]</th>
                        <th>[Header for Column 2]</th>
                        <th>[Header for Column 3]</th>
                        <th>[Header for Column 4]</th>
                    </tr>
                </thead>
                <tr>
                    <td>[Row 1, Column 1]</td>
                    <td>[Row 1, Column 2]</td>
                    <td>[Row 1, Column 3]</td>
                    <td>[Row 1, Column 4]</td>
                </tr>
                <tr>
                    <td>[Row 2, Column 1]</td>
                    <td>[Row 2, Column 2]</td>
                    <td>[Row 2, Column 3]</td>
                    <td>[Row 2, Column 4]</td>
                </tr>
                <tr>
                    <td>[Row 3, Column 1]</td>
                    <td>[Row 3, Column 2]</td>
                    <td>[Row 3, Column 3]</td>
                    <td>[Row 3, Column 4]</td>
                </tr>
                <tr>
                    <td>[Row 4, Column 1]</td>
                    <td>[Row 4, Column 2]</td>
                    <td>[Row 4, Column 3]</td>
                    <td>[Row 4, Column 4]</td>
                </tr>
                <tr>
                    <td>[Row 5, Column 1]</td>
                    <td>[Row 5, Column 2]</td>
                    <td>[Row 5, Column 3]</td>
                    <td>[Row 5, Column 4]</td>
                </tr>
                <tr>
                    <td>[Row 6, Column 1]</td>
                    <td>[Row 6, Column 2]</td>
                    <td>[Row 6, Column 3]</td>
                    <td>[Row 6, Column 4]</td>
                </tr>
                <tr>
                    <td>[Row 7, Column 1]</td>
                    <td>[Row 7,...

CSS

table {
    line-height: 2.5;
    white-space: nowrap;
}
#footer {
    height: 90px;
    background-color: grey;
    margin-top: 50px;
    font-size: 90px;
    font-family: Arial, sans-serif;
    text-align: center;
    white-space: nowrap;
}

JavaScript

$(document).ready(function () {
    $("#wrapper").css({
        "width": $("#example").width(),
            "position": "absolute",
            "display": "inline-block",
            "left": "50%",
            "margin-left": ($("#example").width()) / (-2)
    });
    $("#table-container").height($("#wrapper").height());
});

$('*').on('blur change click dblclick error focus focusin focusout hover keydown keypress keyup load mousedown mouseenter mouseleave mouseout mouseover mouseup scroll select submit', function () {
    $("#wrapper").css({
        "width": $("#example").width(),
            "position": "absolute",
            "display": "inline-block",
            "left": "50%",
            "margin-left": ($("#example").width()) / (-2)
    });
    if ($(window).height() < $("#wrapper").height()) {
        $("#table-container").height($("#wrapper").height());
    } else {
        if ($(window).height() > $("#wrapper").height() + $("#footer").height() + 45) {
            $("#table-container").height($(window).height() - $("#footer").height() - 45);
        } else {
            $("#table-container").height($("#wrapper").height());
        }
    }
});

$(window).resize(function () {
    $("#wrapper").width($("#example").width());
    if ($(window).height() < $("#wrapper").height()) {
        $("#table-container").height($("#wrapper").height());
    } else {
        if ($(window).height() > $("#wrapper").height() + $("#footer").height() + 45) {
            $("#table-container").height($(window).height() - $("#footer").height() - 45);
        } else {
            $("#table-container").height($("#wrapper").height());
        }
    }
});

function truncate() {
    document.getElementById('example').innerHTML = "<thead> <tr> <th>[Header for Column 1]</th> <th>[Header for Column 2]</th> <th>[Header for Column 3]</th> <th>[Header for Column 4]</th> </tr> </thead> <tr> <td>[Row 1, Column 1]</td> <td>[Row 1, Column 2]</td> <td>[Row 1, Column 3]</td> <td>[Row 1, Column...