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

Question

我在 html5 和 bootstrap 推特 中有此 table:

<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。我的问题是如何调整第二个 table 的大小以填充第一个 table 的整个单元格而不是另一个 table 未填充整个 space单元格 ?

Answer 1

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

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

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

Display a full size table in the cells of another table

html

css

html-table

twitter-bootstrap