使用jquery-resize插件正确包含/调整表格

Question

我正在使用带有两个DIV面板的jquery-resize插件 我已经解决了codepen to demonstrate问题。

左侧面板中包含的表格未使用父级调整大小，即使大小设置为100％。

/*THE TABLE WIDTH SHOULD BE 100% OF THE PARENT.*/

table {
  width: 80%
}

.page-container {
  margin: 20px;
}

.panel-container {
  display: flex;
  flex-direction: row;
  border: 1px solid silver;
  overflow: hidden;
  /* avoid browser level touch actions */
  xtouch-action: none;
}

.panel-left {
  flex: 0 0 auto;
  /* only manually resize */
  padding: 10px;
  width: 300px;
  min-height: 200px;
  min-width: 150px;
  white-space: nowrap;
  background: #838383;
  color: white;
}

.splitter {
  flex: 0 0 auto;
  width: 18px;
  background: url(https://raw.githubusercontent.com/RickStrahl/jquery-resizable/master/assets/vsizegrip.png) center center no-repeat #535353;
  min-height: 200px;
  cursor: col-resize;
}

.panel-right {
  flex: 1 1 auto;
  /* resizable */
  padding: 10px;
  width: 100%;
  min-height: 200px;
  min-width: 200px;
  background: #eee;
}

<div class="panel-container">

  <div class="panel-left">
    <table>
      <tr>
        <td>...</td>
      </tr>
    </table>
  </div>

  <div class="splitter">
  </div>

  <div class="panel-right">
    right panel
  </div>
</div>
</div>