我在bootstrap中有一系列嵌套表，但每个类别中的子表都没有正确排列。代码太长了，不能在这里发布，但我在这个小提琴中有它：https://jsfiddle.net/c310uxxf/1
以下是代码片段：
<table class="table table-striped table-hover">
<thead>
<tr>
<th>Loan Status</th>
<th>Number of Loans</th>
<th>Total Loan Amount</th>
</tr>
</thead>
<tr class="accordion-toggle" data-toggle="collapse" data-target="#Registered">
<td><i class="fa fa-plus"></i> Registered</td>
<td>5</td>
<td>$800,000</td>
</tr>
<tr>
<td colspan='2' class="accordion-body collapse" id="Registered">
<table id="example" class="table table-striped responsive-utilities jambo_table">
<thead>
<tr class="headings">
<th>
<input type="checkbox" class="tableflat">
</th>
<th>Invoice </th>
<th>Invoice Date </th>
<th>Order </th>
<th>Bill to Name </th>
<th>Status </th>
<th>Amount </th>
<th class=" no-link last">
<span class="nobr">Action</span>
</th>
</tr>
</thead>
<tbody>
<tr class="even pointer">
<td class="a-center ">
<input type="checkbox" class="tableflat">
</td>
<td class=" ">121000040</td>
<td class=" ">May 23, 2014 11:47:56 PM </td>
<td class=" ">
121000210 <i class="success fa fa-long-arrow-up"></i>
</td>
<td class=" ">John Blank L</td>
<td class=" ">Paid</td>
<td class="a-right a-right ">$7.45</td>
<td class=" last">
<a href="#">View</a>
</td>
</tr>
<tr class="odd pointer">
<td class="a-center ">
<input type="checkbox" class="tableflat">
</td>
<td class=" ">121000037</td>
<td class=" ">May 24, 2014 10:52:44 PM</td>
<td class=" ">121000204</td>
<td class=" ">Mike Smith</td>
<td class=" ">Paid</td>
<td class="a-right a-right ">$333.21</td>
<td class=" last">
<a href="#">View</a>
</td>
</tr>
在小提琴中看起来实际上看起来好一点，所有的主题和惯例，但它仍然没有正确对齐。我试图让子表（注册，提交和锁定下的子表）跨越它们嵌套的表的整个宽度。它可能很简单，但我无法弄明白。
任何帮助都会很棒。
答案 0 :(得分：1)
正如您所提到的，您希望子表（已注册，已提交和已锁定的子表）跨越它们嵌套的表的整个宽度。
问题是subtable是在tr的一个td中定义的，但它的兄弟tr有三列，所以对于有这个子表的tr，你必须组合一列三列，即colspan =“3”
请点击JS Fiddle link查看正确的宽度。
<body class="nav-md">
<div class="container body">
<div class="main_container">
<div class="right_col" role="main">
<div class="col-lg-12 col-sm-12 col-xs-12">
<div class="x_panel">
<table class="table table-striped table-hover">
<thead>
<tr>
<th>Loan Status</th>
<th>Number of Loans</th>
<th>Total Loan Amount</th>
</tr>
</thead>
<tr class="accordion-toggle" data-toggle="collapse" data-target="#Registered">
<td><i class="fa fa-plus"></i> Registered</td>
<td>5</td>
<td>$800,000</td>
</tr>
<tr>
<td colspan='2' class="accordion-body collapse" id="Registered">
<table id="example" class="table table-striped responsive-utilities jambo_table">
<thead>
<tr class="headings">
<th>
<input type="checkbox" class="tableflat">
</th>
<th>Invoice </th>
<th>Invoice Date </th>
<th>Order </th>
<th>Bill to Name </th>
<th>Status </th>
<th>Amount </th>
<th class=" no-link last">
<span class="nobr">Action</span>
</th>
</tr>
</thead>
<tbody>
<tr class="even pointer">
<td class="a-center ">
<input type="checkbox" class="tableflat">
</td>
<td class=" ">121000040</td>
<td class=" ">May 27, 2014 11:47:56 PM </td>
<td class=" ">121000210</td>
<td class=" ">John Blank L</td>
<td class=" ">Paid</td>
<td class="a-right a-right ">$7.45</td>
<td class=" last">
<a href="#">View</a>
</td>
</tr>
<tr class="odd pointer">
<td class="a-center ">
<input type="checkbox" class="tableflat">
</td>
<td class=" ">121000039</td>
<td class=" ">May 28, 2014 11:30:12 PM</td>
<td class=" ">121000208</td>
<td class=" ">John Blank L</td>
<td class=" ">Paid</td>
<td class="a-right a-right ">$741.20</td>
<td class=" last">
<a href="#">View</a>
</td>
</tr>
</tbody>
</table>
<tbody>
<tr class="accordion-toggle" data-toggle="collapse" data-target="#Submitted">
<td><i class="fa fa-plus"></i> Submitted</td>
<td>2</td>
<td>$400,000</td>
</tr>
<tr>
<td class="accordion-body collapse" colspan="3" id="Submitted">
<table class="table table-responsive table-striped">
<thead>
<th>Loan #</th>
<th>Borrower</th>
<th>Program</th>
<th>Loan Amount</th>
</thead>
<tbody>
<tr>
<td>123</td>
<td>John Smith</td>
<td>Conventional</td>
<td>$100,000</td>
</tr>
<tr>
<td>321</td>
<td>Bob Sanders</td>
<td>FHA</td>
<td>$300,000</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr class="accordion-toggle" data-toggle="collapse" data-target="#Locked">
<td><i class="fa fa-plus"></i> Locked</td>
<td>5</td>
<td>$800,000</td>
</tr>
<tr>
<td class="accordion-body collapse" colspan="3" id="Locked">
<table class="table table-responsive table-striped">
<thead>
<th>Loan #</th>
<th>Borrower</th>
<th>Program</th>
<th>Loan Amount</th>
</thead>
<tbody>
<tr>
<td>5</td>
<td>John Doe</td>
<td>Conventional</td>
<td>$100,000</td>
</tr>
<tr>
<td>6</td>
<td>Jane Doe</td>
<td>FHA</td>
<td>$300,000</td>
</tr>
</tbody>
</table>
</td>
</tr>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
希望这会对你有所帮助。