Question

我有大量数据要显示在表格中。当我点击最后一栏中的图标（表示为美丽＆＃34; O＆＃34;这里）时，我希望显示一个＆＃34; SubTable＆＃34;有关上述行的信息......

但是我的子表格并不占据表格的全部宽度，而只占上面标签单元格的100％......

如何实现100％宽度的subTable？

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

Answer 1

我只想使用HTML表格元素，通过调整col-span和<td>的宽度，你可以调整不可用的宽度。

＆＃13;

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

＆＃13;

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

＆＃13;

另一个表HTML中的全宽度表

1 个答案: