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

Question

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

我有一张这样的表：

＆＃13;

＆＃13;

table { 
    max-width:100%;
    overflow: auto;
}

.table1 {
    border: 1px solid red;
}

.table2 {
    border: 1px solid blue;
    overflow-x:scroll;
    display:block;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

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

换句话说，在演示中，我不希望蓝色边框嵌套表将红色边框的右侧推离屏幕。我更倾向于在红色边框表的正常范围内为蓝色边框表显示滚动条。

Answer 1

向父表添加table-layout:fixed; width:100%;

＆＃13;

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;