JSFiddle - React, Tailwind, and code Playground

HTML

<header>
    <nav>Header</nav>
</header>
<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>
<footer>
    <p>Footer</p>
</footer>

CSS

* {margin:0;padding:0;}

body {
    background-color: #888;
    /* Adding the two lines below fixes the problem for webkit and moz.  But IE does not support min-content.
    min-width: -webkit-min-content;
    min-width: -moz-min-content;
    */
}

header {
    background-color: #321;
}

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

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

#main {
    padding: 16px;
    background-color: #FFF;
    overflow: auto;
}

#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;
}