在下面的代码中，当我单击订单列(或(第二列时Order标题会改变其对齐方式，它不是固定的，它会下降。
在这里，我有未正确完成的示例代码。
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Simple Collapsible</h2>
<a href="#demo" class="btn btn-info" data-toggle="collapse">Simple collapsible</a>
<div id="demo" class="collapse">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
</div>
<table class="table table-hover">
<thead>
<th></th>
<th></th>
<th></th>
</thead>
<tbody>
<tr data-toggle="collapse" data-target="#accordion">
<td>Some Stuff</td>
<td>Some more stuff</td>
<td>And some more</td>
</tr>
<tr>
<td colspan="3">
<div id="accordion" class="collapse">Hidden by default</div>
</td>
</tr>
</tbody>
</table>
<table class="table fixed">
<thead>
<tr>
<th></th>
<th>Order Number</th>
<th>Order Date</th>
<th>Total Price</th>
<th>A</th>
<th>B</th>
<th>C</th>
</tr>
</thead>
<tbody>
<tr data-toggle="collapse" data-target=".order1">
<td>></td>
<td>1001</td>
<td data-toggle="collapse" data-target=".order1">9/29/2016</td>
<td>$126.27</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr class="collapse order1">
<td></td>
<td></td>
<td>Shirt</td>
<td></td>
<td></td>
<td></td>
<td>CHECK</td>
</tr>
</tbody>
</table>
</body>
</html>
标题的对齐方式发生变化，因为当第二行出现时，"C"列宽明显增加，因此其他列宽明显减小，因此表格总宽度不会改变。 所以我认为最简单的解决方案是像这样修复列大小：
td{ width : 80px;}<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Simple Collapsible</h2>
<a href="#demo" class="btn btn-info" data-toggle="collapse">Simple collapsible</a>
<div id="demo" class="collapse">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
</div>
<table class="table table-hover">
<thead>
<th></th>
<th></th>
<th></th>
</thead>
<tbody>
<tr data-toggle="collapse" data-target="#accordion">
<td>Some Stuff</td>
<td>Some more stuff</td>
<td>And some more</td>
</tr>
<tr>
<td colspan="3">
<div id="accordion" class="collapse">Hidden by default</div>
</td>
</tr>
</tbody>
</table>
<table class="table fixed">
<thead>
<tr>
<th></th>
<th>Order Number</th>
<th>Order Date</th>
<th>Total Price</th>
<th>A</th>
<th>B</th>
<th>C</th>
</tr>
</thead>
<tbody>
<tr data-toggle="collapse" data-target=".order1">
<td>></td>
<td>1001</td>
<td data-toggle="collapse" data-target=".order1">9/29/2016</td>
<td>$126.27</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr class="collapse order1">
<td></td>
<td></td>
<td>Shirt</td>
<td></td>
<td></td>
<td></td>
<td>CHECK</td>
</tr>
</tbody>
</table>
</body>
</html>