jsp table實現表頭固定，並且表頭和內容對齊
阿新 • • 發佈：2019-01-16
overflow-y:scroll 實現滾動條，<colgroup>標籤使表頭和內容對齊，其中表頭設定的寬度之和為1600px，是頁面寬度1168px的1.37倍，另外預留17px作為滾動條，所以第二個div寬度為138.4555%。程式碼如下
<div>
<div class="table-head" style="width:137%"><table id="contentTable" class="table table-striped table-bordered table-condensed table-hover table-fixed-header" style="margin-bottom:0px;width:137%">
<colgroup>
<col style="width: 120px;" />
<col style="width: 100px;" />
<col style="width: 80px;" />
<col style="width: 80px;" />
<col style="width: 80px;" />
<col style="width: 120px;" />
<col style="width: 80px;" />
<col style="width: 80px;" />
<col style="width: 80px;" />
<col style="width: 80px;" />
<col style="width: 80px;" />
<col style="width: 80px;" />
<col style="width: 80px;" />
<col style="width: 80px;" />
<col style="width: 120px;" />
<col style="width: 80px;" />
<col style="width: 80px;" />
<col style="width: 80px;" />
<col />
</colgroup>
<thead class="header" >
<tr>
<th>航線</th>
<th>航班號</th>
<th>起飛時刻</th>
<th>機型</th>
<th>標準票價</th>
<th>單班飛行小時</th>
<th>班次</th>
<th>提供座位數</th>
<th>合計旅客數</th>
<th>合計收入</th>
<th>班收入</th>
<th>客座率</th>
<th>票價水平</th>
<th>人均票價</th>
<th>標準票價客座率</th>
<th>座公里收入</th>
<th>客公里收入</th>
<th>小時收入</th>
</tr>
</thead>
</table>
</div>
<div style="overflow-y:scroll; width:138.4555%;height:100%;">
<table style="width:137%;" class="table table-striped table-bordered table-condensed table-hover ">
<colgroup>
<col style="width: 120px;" />
<col style="width: 100px;" />
<col style="width: 80px;" />
<col style="width: 80px;" />
<col style="width: 80px;" />
<col style="width: 120px;" />
<col style="width: 80px;" />
<col style="width: 80px;" />
<col style="width: 80px;" />
<col style="width: 80px;" />
<col style="width: 80px;" />
<col style="width: 80px;" />
<col style="width: 80px;" />
<col style="width: 80px;" />
<col style="width: 120px;" />
<col style="width: 80px;" />
<col style="width: 80px;" />
<col style="width: 80px;" />
<col />
</colgroup>
<tbody id="container">
</tbody>
</table>
</div>
</div>