HTML中表格固定列锁定
来源：互联网 发布：vb软件下载 编辑：程序博客网 时间：2024/06/14 04:54
本文主要介绍通过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 onclick="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 onclick="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 onclick="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 onclick="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> 0 0
- HTML中表格固定列锁定
- HTML 锁定表头 固定行 固定列 方法
- html 中表格长度固定
- flex中表格第一列固定
- flex中表格第一列固定
- Html:如何固定表格的标题行和标题列
- 表格列固定
- jquery实现表格列锁定
- 冻结 锁定 固定 行 列 表头 抬头 html table jquery 全兼容常见浏览
- 冻结 锁定 固定 行 列 表头 抬头 html table jquery 全兼容常见浏览器
- LaTex中表格固定列宽并且居中的方法
- 关于bootstrap中table的表格固定列
- HTML表格固定格式：行高列宽
- html表格固定宽度问题
- 滑动固定表格头和列--js,html,css--移动端--基于Iscroll
- EXCEL中固定表格
- 固定行表头，固定列的html
- html table 固定列宽
- python IDE：PyCharm简介
- iOS获取汉字首字母
- Spark 入门之四：Spark任务调度架构
- 项目优化方案
- 小马哥----高仿HTC D816刷机拆机主板图与开机界面图 6582芯片1:1精仿 分新旧 移动版与联通版分别
- HTML中表格固定列锁定
- libevent代码阅读（15）——epoll复用机制
- Java常用类库
- 【深入Java虚拟机】之四：类加载机制
- JVM学习
- My coding way (8)
- Linux IPC实践--System V IPC综合实践
- 中文字转拼音取首字母
- 定义软件架构的10个属性
