0
私は、ブートストラップのCSSを使用してhtmlテーブルを作成しており、スクロール可能なコンテンツでテーブルのヘッダーを修正したいと考えています。私の上記plunkerデモにおいてテーブルの列のアライメントがテーブルのヘッダーと一致しない
https://plnkr.co/edit/uRJ6WFVWevksH3ip4kct?p=preview
は、あなたがヘッダが固定されていることに気づくことができ、コンテンツがscollingされているが、ヘッダとカラムのアラインメントである：以下
は、自分のコードのデモであります一致しません。<td>の幅が
<th>の幅と同じですが、依然としてアラインメントの問題に直面しています。内容の見出しと見出しが一致するようにするために行う変更と、最初の行の一部のコンテンツがテーブルヘッダに隠されていることに気づいた
問題をアドバイスしてください。私は、ヘッダーの幅を設定することにより、CSSでのさまざまな方法を使用して解決しようとしたと<td>が、それを行うことができない。.. コード：幅DIV
<!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） –