对齐嵌套表中的列
dan*_*mix 3 css twitter-bootstrap
我想弄清楚为什么这些 Bootstrap 表不对齐。下图中的所有三个都在一个父表中。这些是子表：
<table class="table table-bordered table-condensed no-bottom-pad" style="width:100%;">
这是家长：
<table class="table borderless table-condensed">
使用一张表和多个<tbody>ie。如果您使用colspan='3'. 基本上，无论您想要另一张桌子，请改用 a <tbody>。<tbody>专为切割桌子而设计。顺便说一句，每个表只能有一个<thead>和一个<tfoot>，这就是为什么最后两行<th>不在 a 中的原因<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>