jquery固定table第一列或第一行
2024-05-24 02:37:40
使用div的position:fixed或者position:absolute属性把div固定位置，然后调试div的宽度和table的td宽度即可
1、固定第一列
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试固定table的列</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){$("p").click(function(){});
});
</script>
</head>
<body>
<div style="height:300px;overflow-x:scroll;margin-left:100px;width:150px;"><div style="position:fixed;height:280px;background-color:white;z-index:9999;width:50px;">1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1</div>
<table border=1 style="border-collapse:separate; border-spacing:10px;"><tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr><tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr>
</table><table border=1 style="overflow-x: scroll;border-collapse:separate; border-spacing:10px;"><tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr><tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr>
</table><table border=1 style="overflow-x: scroll;border-collapse:separate; border-spacing:10px;"><tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr><tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr>
</table>
</div>
</body>
</html>
2、固定第一行
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试固定table的列</title> <style type="text/css">.freezeTd {vertical-align: middle;font-size: 10px;background-color: white;}#scrollid table tr td {vertical-align: middle;height: 30px;text-align: center;border: 0.5px solid #A9A9A9;}</style>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>$(function(){freezeTd();})function freezeTd() {$("#scrollid").scroll(function() { //给table外面的div滚动事件绑定一个函数//var left = $("#scrollid").scrollLeft(); //获取横向滚动的距离var up = $("#scrollid").scrollTop(); //获取纵向滚动的距离if (up > 5) { up = up - 5; } //防止纵向滚动时向上冒出var trs = $("#scrollid table tr");trs.each(function(i) {if ($(this).attr("class") == "freezeTr") {$(this).children(".freezeTd").css({"position": "relative","top": up,//"left": left,//"background-color": "white","z-index": "9999"});} else {$(this).children(".freezeTd").css({"position": "relative","top": "0px"// "left": left,// "background-color": "white"});}});});}</script>
</head>
<body>
<div style="overflow-x:scroll; overflow-y: scroll;width:500px;height:150px;" id="scrollid"><table cellspacing="0" cellpadding="0" style="width:120%;margin-top:5px;"><tr class="freezeTr"><th class="freezeTd">姓名</th><th class="freezeTd">年龄</th><th class="freezeTd">班级</th><th class="freezeTd">性别</th></tr><tr><td >张三</td><td>12</td><td>六一班</td><td>男</td></tr><tr><td >李四</td><td>12</td><td>六一班</td><td>男</td></tr><tr><td >王五</td><td>12</td><td>六一班</td><td>男</td></tr><tr><td>赵六</td><td>12</td><td>六二班</td><td>男</td></tr><tr><td>余七</td><td>12</td><td>六二班</td><td>女</td></tr><tr><td>张三</td><td>12</td><td>六一班</td><td>男</td></tr><tr><td>李四</td><td>12</td><td>六一班</td><td>男</td></tr><tr><td>王五</td><td>12</td><td>六一班</td><td>男</td></tr><tr><td>赵六</td><td>12</td><td>六二班</td><td>男</td></tr><tr><td>余七</td><td>12</td><td>六二班</td><td>女</td></tr></table></div></body>
</html>
jquery固定table第一列或第一行相关推荐
- 固定table第一列
表格:为外层div绑定scroll事件 <div id="freezing" style="overflow:scroll" οnscrοll=" ...
- BootStrap自适应Table表格固定左边第一列
有个页面引用了BootStrap前端框架,这个页面是一个table,要放在手机上浏览.这个table的左侧第一列是要固定的.所谓第一列固定,就是在横向滚动的时候第一列一直显示在最左侧.网上查了下方法, ...
- elementui table 第一列内容相同 自动合并单元格 el-table第一列内容相同自动合并
template( :span-method="objectSpanMethod") <!-- 表格 --><el-table:data="tableD ...
- jQuery获取Table某列的值
在写此篇博文时,发现在以前曾写过<获取DataTable选择第一行某一列值>http://www.cnblogs.com/insus/p/5434062.html . 但是与此篇所说的完全 ...
- JQuery实现table冻结列
由于公司代码框架古老使用静态html画的页面,无法使用bootstrap或easyui实现冻结列 最终再github上面找到的冻结列的实现 github地址 https://qiuyaofan.git ...
- css列名不动_利用js+css+html实现固定table的列头不动
话不多说,跟这小编来一起看下吧 1.CSS #scroll_head { position: absolute; display: none; } 2.Javascript //该函数在上面一个tab ...
- 纯html+css固定表格一列或多列，其余进行横向滚动的方法-鹏仔先生
纯html+css固定表格一列或多列,其余进行横向滚动的方法 工作时候,遇到一个需求,表格的前两列固定不动,其他的跟随滚动条滚动,并没有在意,想起来很简单,刚开始想法是前两列absolute定位,后面 ...
- html表格的列并列,纯html+css固定表格一列或多列，其余进行横向滚动的方法-鹏仔先生...
纯html+css固定表格一列或多列,其余进行横向滚动的方法 工作时候,遇到一个需求,表格的前两列固定不动,其他的跟随滚动条滚动,并没有在意,想起来很简单,刚开始想法是前两列absolute定位,后面 ...
- excel如何获取括号内字符以及excel如何根据第一列是否相等判断是否累加第二列
今天分享两个excel公式小运用. 1.如何获取括号内字符.譬如 思路:Mid(withintext,start_num,lenth)函数 用find(look_char,withintext,sta ...
- 固定表头和第一列、内容可滚动的table表格
本文首发我的简书 鉴于之前有几个项目都用到了第一行第一列固定不动的表格,所以整理了一下制作这种表格的方法. 基本原理是把表格分为四个部分,左上角是固定不动的,第一行和第一列是半固定的,只能左右 ...
最新文章
- MapReduce实现倒排索引（类似协同过滤）
- vivo检测自启动权限_VIVO手机不如苹果？那是你不知道还有这几个功能，用了就离不开...
- 为什么python画不了图-python-为什么pygame不画一个圆？
- 天津理工大学 计算机网络综合实验,天津理工大学计算机网络 实验二
- 披荆斩棘的北森，乘风破浪的HR SaaS
- WPF [调用线程无法访问此对象，因为另一个线程拥有该对象。] 解决方案以及如何实现字体颜色的渐变...
- 聊聊restful和restframework
- [禅悟人生]将所学转化成修行
- K进制 nyoj882
- 计算机底部怎么不显示网络连接图标不见了,电脑任务栏不显示网络连接图标怎么办...
- PLC（可编程逻辑控制器）
- 如何使用 NoxPlayer 加速 Android 应用程序开发？
- 粒子系统-烟花效果的实现
- stm32过零检测电路
- 使用ImageMagick将eps批量导出为透明png图片
- 华硕天选3和联想拯救者r9000p哪个好
- linu修改open files无效_雷电模拟器修改教程
- Hello, Fedora.
- 国际计算机网络与信息安全博览会,2018中国(成都)国际计算机网络及信息安全展览会暨论坛...
- 图书云共享图书体验版本1.1.3.3 即将上线 公众号与小程序用户体系流程整合 信息不再孤立