How can I prevent a nested table from enlarging the parent table?

Question

Demo of my problem here: https://jsfiddle.net/ahnfcwdo/1/

I have a table like this:

 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> </table> </td> </tr> </table>

The parent table will contain a nested table for each detail row. That nested table will have a variable number of columns, some of which do not fit on screen. I'd rather the nested table take on a horizontal scroll bar than cause the parent table to expand horizontally to accommodate the overflow.

In other words, in the demo, I do not want the blue border nested table to push the right side of the red border off screen. I'd rather the scrollbar appear for the blue bordered table within the normal bounds of the red border table.

Answer 1

To the parent table add table-layout:fixed; width:100%; table-layout:fixed; width:100%;

 table { max-width: 100%; overflow: auto; } .table1 { border: 1px solid red; table-layout: fixed; width: 100%; } .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> </table> </td> </tr> </table>