纯css冻结table表头
今天想将⼀个前台页⾯设计的⼀个⼩东西分享⼀下，那就是平时我们设计表格的时候，通常都想将表格的头部进⾏固定，⽽表格的body部分能够进⾏滚动的效果，这个实现起来相对简单的，对于初学div+css布局的同学来说，还是有些帮助的。
这个表格很宽，可以左右滑动。
HTML部分
<div >
<div >
<div id="mainTableBox" >
<table id="mainTable" border="0" width="90%" cellspacing="0" cellpadding="0">
<thead>
<tr>
<th rowspan="3" colspan="12">基本信息</th>
<th rowspan="4" >预领⽉数</th>
<th colspan="25" rowspan="1">领款单明细</th>
<th rowspan="4" >备注</th>
<th rowspan="4" colspan="2" >操作</th>
</tr>
<tr>
<th colspan="10">领款合计</th>
<th colspan="9">应扣除合计</th>
<th colspan="3">应领款合计</th>
<th colspan="3">实际领款⾦额</th>
</tr>
<tr>
<th rowspan="2" >⽣活津贴</th>
<th rowspan="2" >⼀次性派遣补助</th>
<th rowspan="2" >123</th>
<th rowspan="2" >区补贴</th>
<th colspan="3" >应报销项</th>
<th colspan="3">合计</th>
<th colspan="3">国外教学</th>
<th colspan="3">其他收⼊</th>
<th colspan="3" >合计</th>
<th colspan="3">合计</th>
<th colspan="3">合计</th>
</tr>
<tr>
<th rowspan="1">序号</th>
<th rowspan="1">状态</th>
<th rowspan="1">岗位类型</th>
<th rowspan="1">姓名</th>
<th rowspan="1">出⽣地</th>
<th rowspan="1">123</th>
<th rowspan="1">456</th>
<th rowspan="1">预计赴任时间</th>
<th rowspan="1">预计离任时间</th>
<th rowspan="1">任期</th>
<th rowspan="1">个⼈提供⽣活津贴（⼈民币/⽉）</th>
<th rowspan="1">公司提供⽣活津贴（⼈民币/⽉）</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 >⼈民币</th>
<th >其他⾦额</th>
<th >美元</th>
<th >⼈民币</th>
<th >其他⾦额</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="41">data</td>
</tr>
<tr>
<td colspan="41">data</td>
</tr>
<tr>
<td colspan="41">data</td>
</tr>
<tr>
<td colspan="41">data</td>
</tr>
<tr>
<td colspan="41">data</td>
</tr>
<tr>
<td colspan="41">data</td>
</tr>
<tr>
<td colspan="41">data</td>
</tr>
<tr>
<td colspan="41">data</td>
</tr>
<tr>
<td colspan="41">data</td>
</tr>
<tr>
<td colspan="41">data</td>
</tr>
<tr>
<td>合计 </td>
<td colspan="40"></td>
</tr>
<tr >
<td>备注</td>
<td colspan="49" >
<textarea name="" rows="5" ></textarea> </td>
</tr>
</tbody>
</table>
</div>
<table id="headTable" class="headTable" border="0" width="90%" cellspacing="0" cellpadding="0"> <thead>
<tr>
<th rowspan="3" colspan="12">基本信息</th>
<th rowspan="4" >预领⽉数</th>
<th colspan="25" rowspan="1">领款单明细</th>
<th rowspan="4" >备注</th>
<th rowspan="4" colspan="2" >操作</th>
</tr>
<tr>
<th colspan="10">领款合计</th>
<th colspan="9">应扣除合计</th>
<th colspan="3">应领款合计</th>
<th colspan="3">实际领款⾦额</th>
</tr>
<tr>
<th rowspan="2" >⽣活津贴</th>
<th rowspan="2" >⼀次性派遣补助</th>
<th rowspan="2" >安家费</th>
<th rowspan="2" >艰苦地区补贴</th>
<th colspan="3" >其他应报销项</th>
<th colspan="3">合计</th>
<th colspan="3">国外教学</th>
<th colspan="3">其他收⼊</th>
<th colspan="3" >合计</th>
<th colspan="3">合计</th>
<th colspan="3">合计</th>
</tr>
<tr>
<th rowspan="1">序号</th>
<th rowspan="1">状态</th>
<th rowspan="1">岗位类型</th>
<th rowspan="1">姓名</th>
<th rowspan="1">出⽣地</th>
<th rowspan="1">任教国家</th>
<th rowspan="1">地区类别</th>
<th rowspan="1">预计赴任时间</th>
<th rowspan="1">预计离任时间</th>
<th rowspan="1">任期</th>
<th rowspan="1">外⽅提供⽣活津贴（⼈民币/⽉）</th>
<th rowspan="1">我办提供⽣活津贴（⼈民币/⽉）</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 >其他⾦额</th>
<th >美元</th>
<th >⼈民币</th>
<th >其他⾦额</th>
</tr>
</thead>
</table>
</div>
</div>
CSS部分
* {
margin:0;
padding: 0;
}
table {
background: #dfdfdf;
}
table, th,td {
vertical-align: middle;
border-collapse:collapse;
}
th {
border: 1px solid #fff;
css设置表格滚动条height: 40px;
color: #fff;
text-align: center;
border-collapse:collapse;
background: #1a61a3;
}
td {
padding: 5px 0;
text-align: center;
border: 1px solid #eee;
height: 40px;
}
.headTable {
width: 8000px;
position: absolute;
top: 0;
}
这个功能主要思路：
1.两个table表格，第⼆个table表格作为冻结的表头，⽤绝对定位absolute（⽤固定定位position:fixed，表格左右滑动时表头不动）。
2.就是表格宽度⽐外层div的宽度少20像素，这样为了让出⼀个竖向滚动条的宽度。
3.设置两个表格th的宽度，保证两个表格每个单元格宽度⼀致。
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论