JSFiddle - React, Tailwind, and code Playground

HTML

<div class="layout-row">
<header>
    <nav>Header</nav>
</header>
</div>
<div class="layout-row">
<div id="main">
    <div id="wideContent">
        <p>Content here will be a table with a very large number of columns.</p>
        <p>The content and width of the table is not known beforehand.</p>
    </div>
</div>
</div>
<div class="layout-row">
<footer>
    <p>Footer</p>
</footer>
</div>

CSS

* {margin:0;padding:0;}

body {
    background-color: #888;
    display: table;
    min-width: 100%;
}

div.layout-row {
    display: table-row;
}

header {
    display: table-cell;
    background-color: #321;
}

header nav {
    padding: 10px;
    color: #FFF;
}

footer {
    display: table-cell;
    padding: 10px;
    color: #ccc;
    background-color: #123;
}

#main {
    display: table-cell;
    padding: 16px;
    background-color: #FFF;
}

#wideContent {
    background: #FF0;
    width: 4800px; /* In reality, this will vary at runtime, so I cannot set an explict width on the body */
}

table {
    border-collapse: separate;
    border-spacing: 0px;
    border-color: #808080;
    border-style: solid;
    border-width: 1px;
    border-bottom-width: 0;
    background-color: #FFF;
}

td, th {
    border-color: #808080;
    border-style: none;
    border-width: 0;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    padding: 5px 10px;
    min-width: 100px;
}