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

我的问题演示：
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>

父表将包含每个细节行的嵌套表。该嵌套表将具有可变数量的列，其中一些列不适合屏幕。我希望嵌套表采用水平滚动条，而不是使父表水平展开以容纳溢出。
换句话说，在演示中，我不希望蓝色边框嵌套表将红色边框的右侧推离屏幕。我希望在红色边框表的正常范围内显示蓝色边框表的滚动条。

最佳答案

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

关于html - 如何防止嵌套表扩大父表？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/33311443/