HTML中表格固定列锁定

本文主要介绍通过css实现表格固定列锁定及锁定后左右两个表格高度一致。

一、实现表格固定列的原理是，通过两个div，固定列div的css float设置成left，非固定列css overflow-x: auto;

二、左右两个表格高度一致通过jQuery实现

     $(document).ready(function() {var rightPart = $('div.x_auto_box tr');var leftPart = $('div.lock_box tr');for (var i = 0; i < rightPart.length; i++) {var rightHeight = rightPart.eq(i).find('td:first').height();var leftHeight = leftPart.eq(i).find('td:first').height();if(leftHeight > rightHeight){rightPart.eq(i).find('td:first').height(leftHeight+1);} else {leftPart.eq(i).find('td:first').height(rightHeight+1);}}});

效果：

完整代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>固定列头</title> <script type="text/javascript" src="js/jquery-1.8.2.js"></script> <style type="text/css">.ui-table {border-collapse: collapse;width:100%;white-space: nowrap;}.ui-table th {border: 1px solid #ffffff;padding: 1px;text-align: center;}.ui-table td {border: 1px solid #ffffff;background-color: #eeeeee;padding: 3px;}div.x_auto_box {overflow-y: hidden;overflow-x: auto;}div.lock_box {float: left;}</style> <script type="text/javascript">$(document).ready(function() {var rightPart = $('div.x_auto_box tr');var leftPart = $('div.lock_box tr');for (var i = 0; i < rightPart.length; i++) {var rightHeight = rightPart.eq(i).find('td:first').height();var leftHeight = leftPart.eq(i).find('td:first').height();if(leftHeight > rightHeight){rightPart.eq(i).find('td:first').height(leftHeight+1);} else {leftPart.eq(i).find('td:first').height(rightHeight+1);}}});</script> </head> <body> <!-- 左侧DIV --> <div id="list"> <div class="lock_box" style="width:420px;"> <table class="ui-table"> <tbody><tr> <td>选择项</td> <td>No号</td> <td>员工号</td> <td>姓名</td> <td>部门</td> </tr> <tr> <td> <input type="checkbox" name="list[0].flag" value="on" id="flag0" /><input type="hidden" name="list[0].userid" value="SX00001" id="userid" /></td> <td>1</td> <td>SX00001</td> <td><a href="/HRMS2/pages/personManageInfo.jsp?userid=SX00001">员工A</a></td> <td>动画联盟<br />1111111111111</td> </tr> <tr> <td> <input type="checkbox" name="list[1].flag" value="on" id="flag1" /><input type="hidden" name="list[1].userid" value="DHL000000" id="userid" /></td> <td>2</td> <td>DHL000000</td> <td><a href="/HRMS2/pages/personManageInfo.jsp?userid=DHL000000">管理员</a></td> <td>动画联盟</td> </tr> <tr> <td> <input type="checkbox" name="list[2].flag" value="on" id="flag2" /><input type="hidden" name="list[2].userid" value="DHL130003" id="userid" /></td> <td>3</td> <td>DHL130003</td> <td><a href="/HRMS2/pages/personManageInfo.jsp?userid=DHL130003">张三</a></td> <td>动画联盟</td> </tr> <tr> <td> <input type="checkbox" name="list[3].flag" value="on" id="flag3" /><input type="hidden" name="list[3].userid" value="DHL130023" id="userid" /></td> <td>4</td> <td>DHL130023</td> <td><a href="/HRMS2/pages/personManageInfo.jsp?userid=DHL130023">李四</a></td> <td>动画联盟</td> </tr> </tbody></table> </div> <!-- 右侧 --> <div class="x_auto_box" id="showDiv"> <input type="hidden" name="dto.position" value="1" /><input type="hidden" name="dto.position" value="1" /><input type="hidden" name="dto.position" value="1" /><input type="hidden" name="dto.position" value="1" /><table id="tableRight" class="ui-table"> <tbody><tr> <td>性别</td> <td>出生日期</td> <td>民族</td> <td>籍贯</td> <td>婚姻状况</td> <td>学历</td> <td>职位</td> <td>毕业院校</td> <td>专业</td> <td>院校类别</td> <td>毕业日期</td> <td>年龄</td> <td>户籍地址</td> <td>入职时间</td> <td>转正日期</td> <td>本单位工龄</td> <td>合同签订</td> <td>合同年限</td> <td>日语等级</td> <td>社保账号</td> <td>公积金帐号</td> <td>身份证号</td> <td>毕业证书</td> <td>离职时间</td> <td>离职原因</td> <td>户口性质</td> <td>政治面貌</td> <td>参加工作</td> <td>联系电话</td> <td>邮箱</td> <td>家庭住址</td> <td>办公电话</td> <td>备注</td> </tr> <tr οnclick="javascript:window.location.href='/HRMS2/pages/personManageInfo.jsp?userid=SX00001'"> <td>男</td> <td></td> <td></td> <td></td> <td>未婚</td> <td>小学</td> <td>普通员工</td> <input type="hidden" name="dto.position" value="1" /><td></td> <td></td> <td>专升本</td> <td></td> <td>0</td> <td></td> <td></td> <td></td> <td>0.0</td> <td></td> <td>0</td> <td>四级</td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td>非农业户口</td> <td>民主党派</td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr οnclick="javascript:window.location.href='/HRMS2/pages/personManageInfo.jsp?userid=DHL000000'"> <td>男</td> <td></td> <td></td> <td></td> <td>未婚</td> <td>小学</td> <td>SYSTEM</td> <input type="hidden" name="dto.position" value="1" /><td></td> <td></td> <td>专升本</td> <td></td> <td>0</td> <td></td> <td></td> <td></td> <td>0.0</td> <td></td> <td>0</td> <td>四级</td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td>非农业户口</td> <td>民主党派</td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr οnclick="javascript:window.location.href='/HRMS2/pages/personManageInfo.jsp?userid=DHL130003'"> <td>女</td> <td></td> <td></td> <td></td> <td>已婚</td> <td>小学</td> <td>HR</td> <input type="hidden" name="dto.position" value="1" /><td></td> <td></td> <td>专升本</td> <td></td> <td>0</td> <td></td> <td></td> <td></td> <td>0.0</td> <td></td> <td>0</td> <td>四级</td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td>非农业户口</td> <td>民主党派</td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr οnclick="javascript:window.location.href='/HRMS2/pages/personManageInfo.jsp?userid=DHL130023'"> <td>男</td> <td></td> <td>汉</td> <td></td> <td>已婚</td> <td>小学</td> <td>SYSTEM</td> <input type="hidden" name="dto.position" value="1" /><td></td> <td></td> <td>专升本</td> <td></td> <td>0</td> <td></td> <td></td> <td></td> <td>0.0</td> <td></td> <td>0</td> <td>四级</td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td>非农业户口</td> <td>民主党派</td> <td></td> <td>159000000000</td> <td></td> <td></td> <td></td> <td></td> </tr> </tbody></table> </div> </div>  </body>
</html>

HTML中表格固定列锁定相关推荐

element表格固定某一行_element 表格固定列
业务场景:表格展示数据较多,在有限的空间展示过多的数据解决:使用表格固定列(固定列之所以能固定,是因为生成了2个表格,一个用来固定,一个用来滚动), 按照文档介绍固定列需要使用fixed属性,它接受 ...
elementui table 表格固定列最后一行显示不全
elementui table 表格固定列最后一行显示不全这种情况有时在宽度刚好处于临界值状态时会出现.因为固定列是独立于表格body动态计算高度的,出现了固定列高度小于表格高度所以造成最后一行被遮 ...
使用antd表格固定列后行与行之间对不齐
在公司写项目时用了antd的表格固定列,发现固定的列与没有固定的列对不齐在css里加上这段,高度调整到跟未固定列一致即可. >>>.ant-table-thead tr{heigh ...
关于js表格固定列实现
一.概述在开发过程中前端列表展示数据对比查看的情况是比较常见的,我最近接到的一个任务就是要处理这样的数据:一般这种需求将某一列或几列进行横向固定然后其它不固定的列可以照常实现x轴的滚动: 话不多说先 ...
Element 表格固定列横向滚动条无法拖动的问题解决
在Element-UI中,当对表格列进行固定后,底部的横向滚动条就无法拖动了,主要的问题就是固定区域盖住了横向滚动条. 方案一:修改el-table__body-wrapper样式的层级,随便设个层级 ...
表格-固定列固定行
当一个表格展示的数据相当多的时候,经常会用到固定列,固定行的事情原理是两个或者多个表格组合行程固定行或者固定列的情况 ,为了保障样式的统一性当固定行的时候,要限定宽当固定列的时候,要限定高 ...
label居中_表格固定列宽时如何居中？
列宽固定居中的设置的时候,我们通常使用 p{宽度} 来指定固定的列宽,这时单元格会自动换行,换行之后是左对齐的,如何获得居中对齐呢? \begin{tabular}{|p{54pt}l|p{71pt} ...
poi中word中表格跨列合并以及不兼容wps问题，java下 linux下word转pdf 问题解决
最近需要在word中绘制表格,绘制完成后发现 wps不支持poi的跨列合并,百度没有找到好的解决办法.自己在office中把文档转换为doc格式之后发现wps可以正常显示word中的表格了,同时之前微 ...
elementui表格固定列之后行错位解决
项目场景 elementui表格在使用的固定列之后,当出现滚动条时,滚动到最后一条数据会发现对不齐. 解决方案: /** *offset //对齐的高度 **/ function elementFix ...

HTML中表格固定列锁定

HTML中表格固定列锁定相关推荐

最新文章

热门文章