html - 另一个表格 HTML 中的全宽表格

Question

我有大量数据要在表格中显示。当我单击最后一列中的图标(此处表示为漂亮的“O”)时，我希望在有关上述行的信息中显示“子表”...

但是我的子表格并没有占据表格的整个宽度，而是只占据了上面 tab-cell 的 100% ...

如何实现 100% 宽度的子表？

#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

我只会使用 HTML 表格元素并通过调整 <td> 的 col-span 和宽度。你可以调整 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>