HTMLワイドテーブルはスクロールする必要があります。幅の狭いテーブルは親を埋めるように伸ばしてください

Question

私のアプリでは自動生成テーブルを追加するオプションがあり、テーブルが含まれているよりも広い場合にスクロール可能（オーバーフロー-x）親。私の解決策は広いテーブルで動作しますが、より狭いテーブルではなく、親よりもです。親コンテナを横切って伸びる必要があります。 CodePen here。

HTML：

<div id="parent"> 
    <table cellspacing="0" width="100%" class="scroll"> 
     <tbody> 
      <tr class="ms-rteTableHeaderRow-default"> 
       <th rowspan="1" colspan="3">dasdasdas</th> 
       <th rowspan="1" colspan="3">dasdasdas</th> 
       <th rowspan="1" colspan="3">dasdasdas</th> 
       <th rowspan="1" colspan="3">​dasdasdas</th> 
       <th rowspan="1" colspan="3">​dasdasdas</th> 
       <th rowspan="1" colspan="3">​dasdasdas</th> 
       <th rowspan="1" colspan="3">​dasdasdas</th> 
      </tr> 
      <tr class="ms-rteTableOddRow-default"> 
       <th class="ms-rteTableFirstCol-default" rowspan="1" colspan="1">​dasdasdas<br>dasdasdas<br>dasdasdas</th> 
       <td class="ms-rteTableOddCol-default">dasdasdas dasdasdas&nbsp;</td> 
       <td class="ms-rteTableEvenCol-default">dasdasdas</td> 
       <td class="ms-rteTableOddCol-default">&nbsp;</td> 

      </tr> 
      <tr class="ms-rteTableEvenRow-default"> 
       <th class="ms-rteTableFirstCol-default" rowspan="1" colspan="4">​dasdasdas</th> 
       <td class="ms-rteTableOddCol-default">​dasdasdas</td> 
       <td class="ms-rteTableEvenCol-default">​dasdasdas</td> 

       <td class="ms-rteTableEvenCol-default">​dasdasdas</td> 
      </tr> 
      <tr class="ms-rteTableOddRow-default"> 
       <th class="ms-rteTableFirstCol-default" rowspan="1" colspan="1">​dasdasdas</th> 
       <td class="ms-rteTableOddCol-default">​dasdasdas<br>dasdasdas</td> 
       <td class="ms-rteTableEvenCol-default">​dasdasdas<br>dasdasdas</td> 

      </tr> 
      <tr class="ms-rteTableFooterRow-default"> 
       <th class="ms-rteTableFooterFirstCol-default" rowspan="1" colspan="4">dasdasdas</th> 
       <td class="ms-rteTableFooterOddCol-default" rowspan="1">dasdasdas</td> 
       <td class="ms-rteTableFooterEvenCol-default" rowspan="1">dasdasdas</td> 
       <td class="ms-rteTableFooterOddCol-default" rowspan="1">dasdasdas</td> 
       <td class="ms-rteTableFooterEvenCol-default" rowspan="1">dasdasdas</td> 
       <td class="ms-rteTableFooterOddCol-default" rowspan="1">dasdasdas</td> 
       <td class="ms-rteTableFooterEvenCol-default" rowspan="1">dasdasdas</td> 
      </tr> 
     </tbody> 
    </table> 


<table cellspacing="0" width="100%" class="ms-rteTable-default scroll" style="font-size:1em"> 

    <tbody> 
     <tr> 
      <th rowspan="1" colspan="1">title 1</th> 
      <th rowspan="1" colspan="1">this table should span across the parent</th> 
     </tr> 
     <tr> 
      <th rowspan="1" colspan="1">content</th> 
      <td >contentcontentcontentcontentcontentcontentcontentcontentcontentcontent</td> 
     </tr> 
    </tbody> 
</table> 
</div> 

CSS：

td,th{ 
    border:1px solid black; 
} 
#parent{ 
    width: 700px; 
} 
table{ 
    border:1px solid blue; 
    padding: 10px; 

} 
.scroll{ 
    display: block; 
    overflow-x: auto; 
} 

tr { 
    display: table-row; 
    vertical-align: inherit; 
    border-color: inherit; 
} 
tbody { 
    display: table-row-group; 
    vertical-align: middle; 
    border-color: inherit; 
} 

Answer 1

私はあなたのCodePenを見ていたし、すべてが私には正常に見えます。私が起こっていることは、あなたの細胞が全幅を占めていないことです。表（青色の枠線）は幅全体に広がっていますが、セルの幅は内容に合っています。次のものをセルに追加すると、

td, th { 
    width:100%; 
} 

テーブルセルはテーブルの全幅に広がります。つまり、2番目のセルを全幅に広げたいだけかもしれません。次に、width: 100%;というカスタムクラスを追加します。