Question

我试图弄清楚为什么这些Bootstrap表不对齐。下图中的所有三个都在一个父表中。这些是子表：

<table class="table table-bordered table-condensed no-bottom-pad" style="width:100%;">

这是父母：

<table class="table borderless table-condensed">

Fiddle here

Answer 1

使用一个表格和多个<tbody>。如果使用colspan='3'，长单元格会更好。基本上，无论您想要另一张桌子，请改用<tbody>。 <tbody>专为分区表而设计。顺便说一句，每个表只能有一个<thead>和一个<tfoot>，这就是<th>的最后两行不在<thead>中的原因。这是 FIDDLE 以下示例是我建议的基本布局：

实施例

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>tbody Sections</title>
</head>

<body>
<table>
  <thead>
    <tr>
      <th>TH1A</th>
      <th>TH2A</th>
      <th>TH3A</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>TD1A</td>
      <td>TD2A</td>
      <td>TD3A</td>
    </tr>
    <tr>
      <td>TD4A</td>
      <td>TD5A</td>
      <td>TD6A</td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <th>TH1B</th>
      <th>TH2B</th>
      <th>TH3B</th>
    </tr>
    <tr>
      <td>TD1B</td>
      <td>TD2B</td>
      <td>TD3B</td>
    </tr>
  </tbody>
  <tfoot>
  <tr>
  <td colspan='3'>This is where info like missing laptops should go. Unfortunately, having more than one tfoot in a table is invalid.</td>
  </tr>
  </tfoot>
 </table>
</body>
</html>

Answer 2

你有一些问题。

在table内构建table时，该内部表独立于父表工作，这就是列不对齐的原因。

此处的解决方案是使用一个<thead>来控制所有其他<tr>和<td>。

此外，如果您希望<td>具有多个列的宽度，则添加colspan="x"此情况x = 3，因为您有3列。例如：

<tr class="text-danger">
    <td colspan="3">1 laptop was not added because there were no unique identifiers (hostname, asset tag or serial).</td>
</tr>

https://jsfiddle.net/0f561kef/3/

P.S。请正确识别你的代码，这是了解标签开始和关闭的位置及其孩子/父母的噩梦：/

对齐嵌套表中的列

2 个答案:

实施例