纯css实现table表头固定

页面table通常都需要做表头固定，参考了n种实现方式，最终还是选择了用纯css来做表头固定，只是因为方便，易于调试。

css代码如下，table通用，仅供参考。

<style>

         table tbody {  
   display:block;  
   height:350px;  
   overflow-y:scroll;
}    
table thead, tbody tr {  
   display:table;  
   width:100%;
   table-layout:fixed;  
}  
 
table thead {  
   width: calc( 100% - 1em )  
}  
</style>

<table id="contentTable" class="table table-striped table-bordered  table-hover table-condensed  dataTables-example dataTable no-footer">

<thead id="threadHead"><tr><th  style="width: 20px" id="checkHeader"><input type="checkbox"
id="checkAll" class="i-checks"/></th><th>序号</th><th>部门</th><th>姓名</th><th >性别</th><th >状态</th><th class="hideInfo">婚姻状况</th><th class="hideInfo">籍贯</th><th class="hideInfo">职务</th><th class="hideInfo">岗位</th><th class="hideInfo">出生年月</th><th class="hideInfo">年龄</th><th class="hideInfo">毕业院校</th><th class="hideInfo">最高学历</th><th class="hideInfo">专业</th><th class="hideInfo">毕业时间</th><th class="hideInfo">参加工作时间</th><th >身份证号码</th><th>联系方式</th><th class="hideInfo">入职时间</th><th class="hideInfo">转正日期</th><th class="hideInfo">入职工作年限(年)</th><th class="hideInfo">是否已办社保</th><th class="hideInfo">是否已签合同</th><th class="hideInfo">劳动合同期限</th><th class="hideInfo">视为第几次签订劳动合同</th><th>档案编号</th><th>备注</th> <%-- <shiro:hasPermission name="sys:user:edit"><th>操作</th></shiro:hasPermission> --%></tr></thead>
<tbody>
<c:forEach items="${page.list}" var="user"  varStatus="status">
<tr>
<tr>
<td style="width: 20px"><input type="checkbox" name="idCheck" value="${user.id}" id="${user.id}" class="i-checks"/></td>
<td style="width: 40px">${status.index + 1}</td>
<td>${user.office.name}</td>
<td>${user.name}</td>
<td >${fns:getDictLabel(user.gender, 'sex', '')}</td>
<td>${fns:getDictLabel(user.state, 'user_state', '')}</td>
<td  class="hideInfo">${fns:getDictLabel(user.marriage, 'marriage', '')}</td>
<td  class="hideInfo">${user.registeredAdd}</td>
<td  class="hideInfo">${fns:getDictLabel(user.title, 'user_position', '')}</td>
<td  class="hideInfo">${user.duty}</td>
<td  class="hideInfo"><fmt:formatDate value="${user.birthday}" pattern="yyyy-MM-dd"/></td>
<td  class="hideInfo">${user.age}</td>
<td  class="hideInfo">${user.school}</td>
<td  class="hideInfo">${user.education}</td>
<td  class="hideInfo">${user.major}</td>
<td  class="hideInfo"><fmt:formatDate value="${user.graduateDate}" pattern="yyyy-MM-dd"/></td>
<td  class="hideInfo"><fmt:formatDate value="${user.workdate}" pattern="yyyy-MM-dd"/></td>
<td class="identification" data-tableexport-msonumberformat="\@"><c:if test="${not empty user.identificationum}">${user.identificationum}</c:if></td>
<td>${user.mobile}</td>
<td  class="hideInfo"><fmt:formatDate value="${user.indate}" pattern="yyyy-MM-dd"/></td>
<td  class="hideInfo"><fmt:formatDate value="${user.pdate}" pattern="yyyy-MM-dd"/></td>
<td  class="hideInfo">${user.workYear}</td>
<td  class="hideInfo">${fns:getDictLabel(user.socialSecurity, 'user_socialSecurity', '')}</td>
<td  class="hideInfo">${fns:getDictLabel(user.postcode, 'user_socialSecurity', '')}</td>
<td  class="hideInfo"><c:if test="${not empty user.contractStart &&not empty user.contractEnd}">
<fmt:formatDate value="${user.contractStart}" pattern="yyyy-MM-dd"/>至<fmt:formatDate value="${user.contractEnd}" pattern="yyyy-MM-dd"/></c:if></td>
<td  class="hideInfo">${fns:getDictLabel(user.contractNum, 'user_contractNum', '')}</td>
<td>${user.fileNumber}</td>
<td>${user.remarks}</td>
<%-- <shiro:hasPermission name="sys:user:edit"><td>
    <a href="${ctx}/sys/user/profileForm?id=${user.id}" class="btn btn-success btn-xs"><i class="fa fa-edit"></i>修改</a>
</td></shiro:hasPermission> --%>
</tr>
</c:forEach>
</tbody>
</table>