This is my solution. I incorporated borders to enhance clarity.
To make it more concise, I had to simplify and modify the HTML structure a bit.
Visit this link for better visualization
table {
border: solid blue!important;
float: left!important;
width: 200px!important;
}
#table-container {
border: solid red;
height: 300px;
width: 1000px;
display: inline-block;
overflow-x: scroll;
}
#big {
border: solid green;
height: 100%;
display: inline-block;
width: 10000px;
}
Explanation
I enclosed the tables within two divs. The first div determines the width at 300px and allows horizontal scrolling with an overflow property. The child div expands to accommodate all floated tables.
To calculate the width for #big (using jQuery) :
var tableWidth = 200; // obtain from any table if needed
var nrTables = $('table').length;
$('#big').css('width', (nrTables * tableWidth + 30) + 'px');
var tableWidth = 200; // retrieve from a table as per your preference
var nrTables = $('table').length;
$('#big').css('width', (nrTables * tableWidth + 30) + 'px');
table {
border: solid blue!important;
float: left!important;
width: 200px!important;
}
#table-container {
border: solid red;
height: 300px;
width: 500px;
display: inline-block;
overflow-x: scroll;
}
#big {
border: solid green;
height: 100%;
display: inline-block;
width: 10000px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css">
<div id="table-container" style="white-space: nowrap;">
<div id="big">
<table class="table table-bordered d-inline-block align-top" style="background: #f7fec0; padding: 0px;">
<thead>
<tr>
<th> Heading 1</th>
</tr>
</thead>
<tbody>
<tr>
<td>Row content </td>
</tr>
<tr>
<td>Row content </td>
</tr>
<tr>
<td>Row content </td>
</tr>
</tbody>
</table>
<!-- more similar tables follow -->
</div></div>