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

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>