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

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>

这是我第一个表中第二个表的图像结果:

如您所知，我在另一张 table 中有一张 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>