Eine Tabelle voller Breite in einer anderen Tabelle HTML

Question

Ich habe eine große Menge an Daten in einer Tabelle anzuzeigen. Und wenn ich auf das Symbol (in der letzten Spalte als ein schönes "O") klicke, möchte ich eine "SubTable" innerhalb der Informationen über die obige Zeile anzeigen ...

Aber meine Untertabelle nimmt das nicht volle Breite der Tabelle aber nur 100% der Tab-Zelle über ...

Wie erreiche ich eine 100% breite Untertabelle?

#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

Ich würde die HTML-Tabellenelemente nur verwenden und durch die col-Spanne eingestellt und die Breite der <td> Sie die Breite des innertable anpassen können.

.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>