页面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 &¬ 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>