他のテーブル内の全幅テーブルHTML

Question

テーブルに表示するデータが大量です。最後の列のアイコン（ここでは美しい「O」）をクリックすると、上の行についての情報の中に「SubTable」を表示したいと考えています。

私のサブテーブルはテーブルの全幅ですが、上のタブセルの100％のみです。

どのようにして100％幅のサブテーブルを作成できますか？私はちょうどHTMLのテーブル要素を使用すると、COL-スパンと<td>の幅を調整することによって、あなたはinnertableの幅を調整することができ

#tabResults { 
 
    border-collapse: collapse; 
 
} 
 
.tab-row { 
 
    color: #002c65; 
 
    border: 1px solid #002c65; 
 
    display: table-row; 
 
    text-align: center; 
 
} 
 
.tab-row > .tab-cell { 
 
    padding: 10px; 
 
    vertical-align: middle; 
 
}

<div style="display:table;width:100%" id="tabResults"> 
 
    <div style="display:table-header-group;font-weight:bold"> 
 
    <!--------------- Titles of first tab ------------------> 
 
    <div class="tab-row"> 
 
     <div style="display:table-cell" class="tab-cell"><span>N° IDID</span></div> 
 
     <div style="display:table-cell" class="tab-cell"><span>Date</span></div> 
 
     <div style="display:table-cell" class="tab-cell"><span>How much</span></div> 
 
     <div style="display:table-cell" class="tab-cell"><span>lol</span></div> 
 
     <div style="display:table-cell" class="tab-cell"><span>Pay</span></div> 
 
     <div style="display:table-cell" class="tab-cell"><span>Damned</span></div> 
 
     <div style="display:table-cell" class="tab-cell"><span>ICON</span></div> 
 
    </div> 
 
    </div> 
 
    <div style="display:table-row-group" data-bind="foreach: resultSearchReleve"> 
 
    <!------ This forEach (from knockoutjs) gives a large number of rows : here are 2 in example ----> 
 
    <div class="tab-row"> 
 
     <div style="display:none" data-bind="text: id">471137</div> 
 
     <div style="display:table-cell" class="tab-cell"><span>TL0000020</span></div> 
 
     <div style="display:table-cell" class="tab-cell"><span>03/10/2016</span></div> 
 
     <div style="display:table-cell" class="tab-cell"><span>160587</span> €</div> 
 
     <div style="display:table-cell" class="tab-cell"><span>DATA</span></div> 
 
     <div style="display:table-cell" class="tab-cell"><span>DATAAAAS</span></div> 
 
     <div style="display:table-cell" class="tab-cell">jj</div> 
 
     <div style="display:table-cell" class="tab-cell">O</div> 
 
    </div> 
 
    <div class="tab-row"> 
 
     <div style="display:none" data-bind="text: id">710137</div> 
 
     <div style="display:table-cell" class="tab-cell"><span>Tii00020</span></div> 
 
     <div style="display:table-cell" class="tab-cell"><span>03/10/2016</span></div> 
 
     <div style="display:table-cell" class="tab-cell"><span>Something</span></div> 
 
     <div style="display:table-cell" class="tab-cell"><span>smth</span></div> 
 
     <div style="display:table-cell" class="tab-cell"><span>smth</span></div> 
 
     <div style="display:table-cell" class="tab-cell"><span>smth</span></div> 
 
     <div style="display:table-cell" class="tab-cell"><span>O</span></div> 
 
    </div> 
 
    <!----- Here should begin the "SubTable" and should take 100% width of the row ! ------> 
 
    <div class="tab-row"> 
 
     <table style="width:100%"> 
 
     <thead> 
 
      <tr> 
 
      <th><span data-bind="">Hello</span></th> 
 
      <th><span data-bind="">Hello</span></th> 
 
      <th><span data-bind="">Hello</span></th> 
 
      <th><span data-bind="">Hello</span></th> 
 
      <th><span data-bind="">Hello</span></th> 
 
      <th><span data-bind="">Hello</span></th> 
 
      <th><span data-bind="">Hello</span></th> 
 
      <th><span data-bind="">Hello</span></th> 
 
      </tr> 
 
     </thead> 
 
     <tbody> 
 
      <tr> 
 
      <td><span>16-02870</span></td> 
 
      <td><span>91229.58</span></td> 
 
      <td><span>91229.58</span></td> 
 
      <td><span>91229.58</span></td> 
 
      <td><span>91229.58</span></td> 
 
      <td><span>91229.58</span></td> 
 
      <td><span>91229.58</span></td> 
 
      <td><span>91229.58</span></td> 
 
      </tr> 
 
      <tr> 
 
      <td><span>1zefze</span></td> 
 
      <td><span>91zef</span></td> 
 
      <td><span>9zea58</span></td> 
 
      <td><span>91qsc58</span></td> 
 
      <td><span>9qscq8</span></td> 
 
      <td><span>scqs8</span></td> 
 
      <td><span>ss8</span></td> 
 
      <td><span>aaaaa</span></td> 
 
      </tr> 
 
     </tbody> 
 
     </table> 
 
    </div> 
 
    <!-- // tab-row --> 
 

 

 
    <!-- Here again a line from "first level tab" --> 
 
    <div class="tab-row"> 
 
     <div style="display:none" data-bind="text: id">47r137</div> 
 
     <div style="display:table-cell" class="tab-cell"><span>TLerh020</span></div> 
 
     <div style="display:table-cell" class="tab-cell"><span>03/10/2016</span></div> 
 
     <div style="display:table-cell" class="tab-cell"><span>1e587</span> €</div> 
 
     <div style="display:table-cell" class="tab-cell"><span>DrA</span></div> 
 
     <div style="display:table-cell" class="tab-cell"><span>DrATArAAS</span></div> 
 
     <div style="display:table-cell" class="tab-cell">jj</div> 
 
     <div style="display:table-cell" class="tab-cell">O</div> 
 
    </div> 
 

 
    </div> 
 
    <!-- //Table row-group --> 
 
</div> 
 
<!-- // #tabResults -->

Answer 1

。

.innertable{ 
 
    width: 100%; 
 
    text-align: center; 
 
}

<table> 
 
    <thead> 
 
    <tr> 
 
     <td class="tab-cell"><span>N° IDID</span></td> 
 
     <td class="tab-cell"><span>Date</span></td> 
 
     <td class="tab-cell"><span>How much</span></td> 
 
     <td class="tab-cell"><span>lol</span></td> 
 
     <td class="tab-cell"><span>Pay</span></td> 
 
     <td class="tab-cell"><span>Damned</span></td> 
 
     <td class="tab-cell"><span>ICON</span></td> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr class="parentTable"></tr> 
 
    <tr class="innerTable"> 
 
     <td colspan="7"> <!-- Colspan the amount of columns inside the parent table OR MORE --> 
 
     <table class="innertable"> 
 
      <tr> 
 
      <th>header<th> 
 
      <th>header<th> 
 
      </tr> 
 
      <tr> 
 
      <td>body<td> 
 
      <td>body<td> 
 
      </tr> 
 
     </table> <! -- Example --> 
 
     </td> 
 
    </tr> 
 
    </tbody> 
 
</table>