jsp table实现表头固定，并且表头和内容对齐

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>