HTML中表格固定列锁定

最新推荐文章于 2024-04-28 14:57:52 发布
最新推荐文章于 2024-04-28 14:57:52 发布
阅读量3.6k 收藏 1
点赞数
分类专栏： JavaScript 开发 CSS 文章标签： 表格固定列
本文为博主原创文章，未经博主允许不得转载。
本文链接：https://blog.csdn.net/psp0001060/article/details/49705247
版权

本文主要介绍通过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>




东语~
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
HTML 实现行、列冻结功能
05-23
HTML 实现行、列冻结功能,使用了javascript、jquery 的方式实现了类似excel冻结的功能。
H5实现固定表头首列表格
weixin_45371730的博客
09-06 600
解决方案：禁用ios的自身滚动，利用代码实现滚动效果（但是滚动会没有浏览器滚动那么流畅丝滑，如果小伙伴们有更好的解决方案~可以一起讨论呐）bug2:ios中纵向滚动、横向滚动不独立（横向滑动的同时，纵向会轻微滚动，纵向滑动的同时，横向会轻微滚动）三、js实现表头、首列滚动。bug1:ios橡皮筋效果。四、遇到的bug调整。
学习使用html中table实现内容滚动下拉表头和左右滑动前四列固定不动的方法代码整理
最新发布
徊忆羽菲
04-28 1487
学习使用html中table实现内容滚动下拉表头和左右滑动前四列固定不动的方法代码整理
HTML 表格滚动锁定表头，实现固定行列
热门推荐
qq_25775675的博客
04-01 1万+
这个案例主要实现了表格在横向滚动或者纵向滚动时可以锁定表格的头部。 主要 css 代码在 style 标签下，还有就是表格外层的div也设置了绝对布局，这样可以将内部表格的高度设置为100%，否则就需要设置一个固定高度。
HTML 锁定表头 固定行 固定列 方法
止境
02-20 8675
因为方法很简单，就未封装成插件的形式，仅仅以代码方式发布。这里把自己做的方式写出来，以资纪念。 支持IE6+，FF3.6+，Opera9+，Chrome9+ 一、实现方式 这里的准备使用4个table实现，具体如下图： 上图红色部分为要取出来的部分，蓝色部分为拼接后可以看到的部分。最终结果如下图 二、整体的框架 1、最下面的是原始的Table
HTML页面table表格固定行和列
01-04
为了解决这个问题，我们可以实现HTML表格的固定表头和固定左侧列，确保用户在滚动时始终能看到关键信息。 固定表头通常是通过CSS定位技术来实现的。我们可以创建一个包含表头的新`<div>`，并将其设置为绝对定位，使...
vue表格实现固定表头首列
11-02
在Vue移动端项目中，开发人员经常遇到需要创建具备固定表头和首列的表格，以提供良好的用户体验。本文将详细讲解如何在不依赖任何UI框架或插件的情况下，利用Vue的核心特性实现这样一个功能。 首先，我们需要理解...
js实现html table 行,列锁定的简单实例
10-21
总之，JavaScript实现HTML表格的行和列锁定是一种常见的增强用户交互的方法，尤其适用于大数据量的表格。通过理解并运用上述代码，开发者可以创建自定义的解决方案，为用户提供更友好的表格查看体验。
html表格中,锁定行头和列头
12-20
在html的表格中,锁定行头和列头,使用样式表,不用加载第三方控件.
HTML+JS实现固定表头和锁定左列的Demo（兼容IE，火狐，谷歌等大众浏览器）
03-28
在这个特定的Demo中，开发者使用了这两种技术来实现一个功能，即在表格中固定表头和锁定左列，以便于用户在滚动查看长表格内容时，表头始终保持可见，左侧列也保持固定。这个功能对于数据密集型的网页应用尤其有用，...
html5页面表格固定列与表格内数据跳转功能
09-27
html5表格引用了amazeui框架的css样式，固定列问题就有点问题，后来引用了tablefreeze的工具，可顺利完成固定列滑动。关于表格内数据跳转运用了location。href="##"跳转，如果要传参数可在后面加上"?a=1"，通过中间java 代码传递。
锁定行列的html插件,如何实现行列的锁定
weixin_36301296的博客
06-10 422
功能介绍：可以实现锁定表格的行和列的功能，效果和Excel里的冻结窗格类似，当然没有Excel那么强大了，只是类似。问题：当一个table太大而导致在屏幕里显示不下的时候，IE会出现滚动条，但是这时候就不好看了，对用户的操作也不是很方便。于是我们就想给他加一个限制，在制定的范围内滚动。如何实现呢?网上也有不少实现方法了，效果如何就不发表意见了，这里主要是想说一下我的思路。思路：1、其实思路很简单，...
如何使用超简单的HTML和CSS代码来实现固定列的表格
百度一下 猎人社区
05-12 1479
在网页开发中，表格是一个非常常见的组件，并且对于大多数开发者而言，不可或缺。然而，在一些情况下，表格数据非常复杂，导致其中的一些列需要被固定，使得它们随着页面的滚动而保持在屏幕上方。本文将介绍如何使用超简单的HTML和CSS代码来实现固定列的表格。固定列的表格在网页开发中是非常常见的组件，通过本文所介绍的HTML和CSS代码，可以轻松实现一个类似的效果。同时需要注意：如果固定表格中的内容包含多行、超链接或其他特殊内容类型，则可能会需要进行一些额外的调整。接下来，我们将展示如何通过CSS实现固定列。
html5 表格固定表头，表尾，及前几列
03-28 697
小11</td><td>小12</td><td>小1</td><td>小2</td><td>小3</td><td>小4</td><td>小5</td><td>小6</td><td>小7</td><td>小8</td><td>小9</td><td>语文</td><td>数学</td><td>英文</td><td>历史</td><td>地理</td><td>生物</td><td>化学</td><td>物理
HTML Table 首尾行、首列固定
kingwin28的博客
02-16 1296
HTML Table 首尾行、首列固定
html+css实现左侧固定右侧横向滚动的表格（百度小程序中怎么写表格样式）
小R.的博客
12-15 1186
  最近在用百度小程序写项目，遇到一个问题，设计图中有个左侧固定右侧横向滚动的表格，查看小程序文档组件，并没有完全一致的。   倒是有个差不多的，乍看差不多，实则完全不一样，方向什么的都不同，且未提供更改方向等的属性方法，所以无奈之下只能手写。又发现并不支持table、th、td等，所以只能用 view 拼凑咯。   以下是我整理的一个小Demo，由百度小程序 view 写法改成了HTML中的 div 写法，可能有点简陋，但是自己还是蛮满意的，😄。   先来看样子，红色边框是我定的外部宽度。   再来上代
原生html+css 实现table表格超出宽度后，table的第一列和第二列固定左侧，其余列左右滚动
Sunny_lxm的博客
04-10 471
原生html+css 实现table表格超出宽度后，table的第一列和第二列固定左侧，其余列左右滚动
纯html+css固定表格一列或多列，其余进行横向滚动的方法-鹏仔先生
鹏仔工作室的秘密基地
06-16 7240
纯html+css固定表格一列或多列，其余进行横向滚动的方法 工作时候，遇到一个需求，表格的前两列固定不动，其他的跟随滚动条滚动，并没有在意，想起来很简单，刚开始想法是前两列absolute定位，后面的relative定位并给left值为前面的总宽度，就这样做了，发现是有问题的，具体啥问题就不多说了，如真想研究，自己尝试吧。 当然，网上有很多插件的，比较好用，也建议大家使用插件吧，如TableFreeze-master 插件下载 蓝奏网盘：点击下载 下面给大...
iview 表格嵌套表格固定列
11-04
这将使得指定的列固定在表格的左侧或右侧位置。 然后，在主表格的某一列中，我们可以使用嵌套表格的方式来创建一个子表格。通过在该列的slot中使用`<template>`标签，并添加相应的标识，我们可以在该slot中引入子...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值