0
我正在与引导CSS的HTML表，并希望使表头与可滚动内容固定。表列对齐与表头不匹配
下面是我的代码演示：
https://plnkr.co/edit/uRJ6WFVWevksH3ip4kct?p=preview
在我上面plunker演示中，您可以看到，标题是固定的，内容是scolling但列其标题对齐不匹配。我给出<td>的宽度相同，宽度为<th>，但仍面临对齐问题。请建议做什么更改要做的内容和标题匹配的列和我注意到的其他问题是一些内容的第一行隐藏回表头。我试图通过设置标题的宽度和使用CSS不同的方式来解决<td>，但不能让它..
代码：
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<style>
.header-fixed {
width: 100%
}
.table-fixed thead {
}
.table-fixed tbody {
height: 100%;
width: 100%;
}
thead {
position: fixed;
}
</style>
</head>
<body>
<div>
<div class="modal-body">
<div class="row">
<div class="" style="width: 80%; margin: 0px auto">
<table class="table table-bordered header-fixed" style="border :1px">
<thead>
<tr style="background-color: #cdd0d6;">
<th style="width:10%;white-space: wrap;text-align: center;">ID</th>
<th style="width:30%;white-space: nowrap;text-align: center;">Description</th>
<th style="width:10%;white-space: wrap;text-align: center;">DoorNum</th>
<th style="width:10%;white-space: wrap;text-align: center;">First Name</th>
<th style="width:10%;white-space: wrap;text-align: center;">Num of ordered items</th>
<th style="width:30%;white-space: wrap;text-align: center;">Desc Comments</th>
</tr>
</thead>
<tbody >
<tr>
<td style="width:10%;text-align: center;">10</td>
<td style="width:30%;text-align: center; ">Item belongs to Navvy modal 2014WE belomgs to the user name JOE dispathched after one week of odered date</td>
<td style="width:10%;text-align: center; ">798</td>
<td style="width:10%;text-align: center; ">Joe</td>
<td style="width:10%;text-align: center; ">4</td>
<td style="widtg:30%;text-align: center; ">Order dispatched</td>
</tr>
<tr>
<td style="width:10%;text-align: center;">20</td>
<td style="width:30%;text-align: center; "></td>
<td style="width:10%;text-align: center; ">798</td>
<td style="width:10%;text-align: center; ">Joe</td>
<td style="width:10%;text-align: center; ">4</td>
<td style="widtg:30%;text-align: center; ">Order dispatched</td>
</tr>
<tr>
<td style="width:10%;text-align: center;">30</td>
<td style="width:30%;text-align: center; ">Item belongs to Navvy modal 2014WE belomgs to the user name JOE dispathched after one week of odered date</td>
<td style="width:10%;text-align: center; "></td>
<td style="width:10%;text-align: center; ">Joe</td>
<td style="width:10%;text-align: center; ">4</td>
<td style="widtg:30%;text-align: center; ">Order dispatched</td>
</tr>
<tr>
<td style="width:10%;text-align: center;">40</td>
<td style="width:30%;text-align: center; ">Item belongs to Navvy modal 2014WE belomgs to the user name JOE dispathched after one week of odered date</td>
<td style="width:10%;text-align: center; ">798</td>
<td style="width:10%;text-align: center; ">Joe</td>
<td style="width:10%;text-align: center; ">4</td>
<td style="widtg:30%;text-align: center; ">Order dispatched</td>
</tr>
<tr>
<td style="width:10%;text-align: center;">50</td>
<td style="width:30%;text-align: center; ">Item belongs to Navvy modal 2014WE belomgs to the user name JOE dispathched after one week of odered date</td>
<td style="width:10%;text-align: center; ">798</td>
<td style="width:10%;text-align: center; ">Joe</td>
<td style="width:10%;text-align: center; ">4</td>
<td style="widtg:30%;text-align: center; ">Order dispatched</td>
</tr>
<tr>
<td style="width:10%;text-align: center;">60</td>
<td style="width:30%;text-align: center; ">Item belongs to Navvy modal 2014WE belomgs to the user name JOE dispathched after one week of odered date</td>
<td style="width:10%;text-align: center; ">798</td>
<td style="width:10%;text-align: center; ">Joe</td>
<td style="width:10%;text-align: center; ">4</td>
<td style="widtg:30%;text-align: center; ">Order dispatched</td>
</tr>
<tr>
<td style="width:10%;text-align: center;">70</td>
<td style="width:30%;text-align: center; ">Item belongs to Navvy modal 2014WE belomgs to the user name JOE dispathched after one week of odered date</td>
<td style="width:10%;text-align: center; ">798</td>
<td style="width:10%;text-align: center; ">Joe</td>
<td style="width:10%;text-align: center; ">4</td>
<td style="widtg:30%;text-align: center; ">Order dispatched</td>
</tr>
<tr>
<td style="width:10%;text-align: center;">8</td>
<td style="width:30%;text-align: center; ">Item belongs to Navvy modal 2014WE belomgs to the user name JOE dispathched after one week of odered date</td>
<td style="width:10%;text-align: center; ">798</td>
<td style="width:10%;text-align: center; ">Joe</td>
<td style="width:10%;text-align: center; ">4</td>
<td style="widtg:30%;text-align: center; ">Order dispatched</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>>
</body>
</html>
看看[this]（https://stackoverflow.com/questions/4709390/table-header - 留在固定在顶部，当用户滚动它的视图与jque/5859976＃5859976） –