Seba99 Seba99 - 28 days ago 5
CSS Question

A full width table within an other table HTML

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

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>

Comments