在另一个表的单元格中显示完整大小的表

Question

我在 html5 和 bootstrap twitter 中有此表：

<table class="table stripe row-border order-column display table-bordered table-hover compact" cellspacing="0" width="90%">
  <thead>
    <tr>
      <th>Example 1</th>
      <th>Example 2</th>
      <th>Example 3</th>
      <th>Paramètres Mesuré <!-- (title of the second table in the first table, need to be centered) -->
        <table class="table stripe row-border order-column display table-bordered table-hover compact" cellspacing="0" width="100%">
          <tr>
            <th>Code</th>
            <th>Nom</th>
            <th>Type</th>
            <th>Unité</th>
          </tr>
        </table>
      </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>results example 1 (first table)</td>
      <td>results example 2 (first table)</td>
      <td>results example 3 (first table)</td>
      <td>
        <table class="table stripe row-border order-column display table-bordered table-hover compact" cellspacing="0" width="100%">
            <tr>
              <td>result Code example 4 (second table)</td>
              <td>result Nom example 4 (second table)</td>
              <td>result type example 4 (second table)</td>
              <td>result unité example 4 (second table)</td>
            </tr>
        </table>
      </td>
    </tr>
  </tbody>
</table>

这是我第一张表格中第二张图片的结果：

你可以理解，我在另一张桌子上有一张桌子。我的问题是如何调整第二个表的大小以填充我的第一个表格的整个单元格而没有另一个表格没有填满整个单元格的空间？

Answer 1

您需要从包含表格的单元格和内部表格的底部边距中删除填充。例如：

＆＃13;

＆＃13;

.table>thead>tr>th.no-cell-padding,
.table>tbody>tr>td.no-cell-padding {
  padding: 0;
}

.inner-table.table {
  margin-bottom: 0;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>


<table class="table stripe row-border order-column display table-bordered table-hover compact" cellspacing="0" width="90%">
  <thead>
    <tr>
      <th>Example 1</th>
      <th>Example 2</th>
      <th>Example 3</th>
      <th class="no-cell-padding">Paramètres Mesuré
        <!-- (title of the second table in the first table, need to be centered) -->
        <table class="inner-table table stripe row-border order-column display table-bordered table-hover compact" cellspacing="0" width="100%">
          <tr>
            <th>Code</th>
            <th>Nom</th>
            <th>Type</th>
            <th>Unité</th>
          </tr>
        </table>
      </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>results example 1 (first table)</td>
      <td>results example 2 (first table)</td>
      <td>results example 3 (first table)</td>
      <td class="no-cell-padding">
        <table class="inner-table table stripe row-border order-column display table-bordered table-hover compact" cellspacing="0" width="100%">
          <tr>
            <td>result Code example 4 (second table)</td>
            <td>esult Nom example 4 (second table)</td>
            <td>esult type example 4 (second table)</td>
            <td>esult unité example 4 (second table)</td>
          </tr>
        </table>
      </td>
    </tr>
  </tbody>
</table>

＆＃13;

＆＃13;

＆＃13;