A full width table within an other table HTML

Question

I have a large amount of data to display in a table. And when I click on the icon ( represented as a beautifull "O" here ) in the last column I wish to display a "SubTable" within information about the line above ...

But my subtable doesn't take the full width of the table but only 100% of the tab-cell above ...

How can I achieve a 100% width subTable?

#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

I would just use the HTML table elements and by adjusting the col-span and the width of the <td> you can adjust the width of the innertable.

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