纯css实现table表头固定
来源:互联网 发布:电脑双桌面软件 编辑:程序博客网 时间:2024/05/17 01:39
页面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>
阅读全文
0 0
- 纯css实现table表头固定
- js、css实现table表头固定
- 纯css实现table表格固定列和表头,中间横向滚动的思路-附案例
- 纯css实现table表格固定列和表头,中间横向滚动的思路-附案例
- css 固定table表头
- Table实现表头固定
- table表头和首列的表格固定-CSS实现的Table表头固定
- table表头和首列的表格固定-CSS实现的Table表头固定
- table表头列头固定(css实现)
- html table css 实现固定表头的办法
- HTML/CSS实现<table>表头固定、表体滚动
- 两个table实现固定表头
- js 实现 table 固定表头
- html Table实现表头固定
- html Table实现表头固定
- 简单实现Table固定表头
- css实现table锁定表头
- css 实现 table斜线表头
- webScoket学习之开发炎龙骑士团
- 八皇后问题(回溯法)
- C#中Request.ServerVariables详细说明及代理
- node进阶之process进程
- PHP date, time, microtime
- 纯css实现table表头固定
- PAT (Advanced Level) Practise 1061 Dating (20)
- 关于七大排序问题《三》
- PHP HTTP添加自定义头
- 输入一个int型整数,按照从右向左的阅读顺序,返回一个不含重复数字的新的整数。
- C++记忆化搜索算法与动态规划算法之公共子序列
- 字段=“”与字段 is null
- 《Linux内核设计与实现》读书笔记(十五)- 进程地址空间(kernel 2.6.32.60)
- Android根据本地端口号寻找对应的用户UID和进程PID