This is where I'm demonstrating the issue: https://jsfiddle.net/ahnfcwdo/1/
Below is the structure of the table:
table {
max-width:100%;
overflow: auto;
}
.table1 {
border: 1px solid red;
}
.table2 {
border: 1px solid blue;
overflow-x:scroll;
display:block;
}<table class="table1">
<tr>
<td>column a</td>
<td>column b</td>
<td>column c</td>
</tr>
<tr>
<td colspan="3">
<table class="table2">
<tr>
<td>column</td>
<td>column</td>
<td>column</td>
<td>column</td>
<td>column</td>
<td>column</td>
<td>column</td>
<td>column</td>
<td>column</td>
<td>column</td>
<td>column</td>
<td>column</td>
<td>column</td>
<td>column</td>
<td>column</td>
<td>column</td>
<td>column</td>
<td>column</td>
<td>column</td>
<td>column</td>
</table>
</td>
</tr>
</table>For each detail row, the parent table will contain a nested table. The nested table may have more columns than can fit on the screen. I prefer the nested table to have a horizontal scroll bar rather than expanding the parent table horizontally to fit the overflow.
In the demo, I'm showing that I don't want the blue border of the nested table to push the red border off the screen. I want the scrollbar to appear for the blue bordered table within the confines of the red border table.