有没有一种方法可以让内部CSS表扩展外部CSS表的整个宽度？

如何解决有没有一种方法可以让内部CSS表扩展外部CSS表的整个宽度？

我已经使用CSS display：table，display：table-row和display：table-cell方法构建了一个表。但是，当我尝试在该表中使用表时，对于较大数据中的较小数据子部分，我无法获取内部表来扩展其父表的整个宽度。

<div class="table clearfix">
  <div class="head">
    <div class="cell">stuff</div>
    <div class="cell">stuff</div>
    <div class="cell">stuff</div>
  </div>
  <div class="row">
    <div class="cell">stuff</div>
    <div class="cell">stuff</div>
    <div class="cell">stuff</div>
  </div>
  <div class="inner-row">
    <div class="inner-row-container">
      <div class="table clearfix">
        <div class="head">
          <div class="cell">inner stuff</div>
          <div class="cell">inner stuff</div>
          <div class="cell">inner stuff</div>
        </div>
        <div class="row">
          <div class="cell">inner stuff</div>
          <div class="cell">inner stuff</div>
          <div class="cell">inner stuff</div>
        </div>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="cell">stuff</div>
    <div class="cell">stuff</div>
    <div class="cell">stuff</div>
  </div>  
</div>

https://codepen.io/hitokage/pen/qBZJbpG

我知道CSS表没有colspan这样的东西，而我尝试的任何方法都导致失败。由于代码内的循环，我无法在内部表之前关闭父表。