在另一个表格的单元格中显示全尺寸表格

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

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

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

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

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