如何防止嵌套表扩大父表？

Question

我的问题演示在这里： https : //jsfiddle.net/ahnfcwdo/1/

我有一张这样的表：

 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>

父表将包含每个详细信息行的嵌套表。 该嵌套表将具有可变数量的列，其中一些列不适合屏幕。 我宁愿嵌套表采用水平滚动条而不是导致父表水平扩展以适应溢出。

换句话说，在演示中，我不希望蓝色边框嵌套表将红色边框的右侧推离屏幕。 我宁愿滚动条出现在红色边框表的正常范围内的蓝色边框表中。

Answer 1

到父表添加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>