JS 固定列和头部固定

最新推荐文章于 2021-11-30 16:41:19 发布
最新推荐文章于 2021-11-30 16:41:19 发布
阅读量824 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： JavaScript 文章标签： 前端 ViewUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/flyfx52/article/details/84506771
<html>
<head>
<title>Fixed Header And Columns</title>
<style type="text/css">
.Freezing {
z-index: 10;
position: relative;
top: expression(this.offsetParent.scrollTop)
}

.FreezingCol {
z-index: 1;
left: expression(document.getElementById("freezingDiv").scrollLeft);
position: relative
}

#DataGrid1 tr{color:#003399;background-color:White;}
</style>
</head>
<body>
<div id="freezingDiv" style="overflow:auto; width:400px; height:155px">
<table cellspacing="0" cellpadding="4" rules="all" bordercolor="#3366CC" border="1" id="DataGrid1" style="background-color:White;border-color:#3366CC;border-width:1px;border-style:None;width:900px;border-collapse:collapse;">
<tr class="Freezing" style="color:#CCCCFF;background-color:#003399;font-weight:bold;">
<td class="FreezingCol">ID</td>
<td class="FreezingCol">XXXX</td>
<td>XXXXX/td>
<td>XXXXX</td>
<td>XXXXX</td>
<td>XXXXX</td>
<td>XXXXX</td>
</tr>
<tr>
<td class="FreezingCol"><span>1</span> </td>
<td class="FreezingCol"> <span>aaaa</span> </td>
<td>bbbb</td>
<td>(0952)26-64XX</td>
<td>eeeeee</td>
<td>ccccc</td>
<td>ddddd</td>
</tr>
<tr>
<td class="FreezingCol"><span>1</span> </td>
<td class="FreezingCol"> <span>aaaa</span> </td>
<td>bbbb</td>
<td>(0952)26-64XX</td>
<td>eeeeee</td>
<td>ccccc</td>
<td>ddddd</td>
</tr>
<tr>
<td class="FreezingCol"><span>1</span> </td>
<td class="FreezingCol"> <span>aaaa</span> </td>
<td>bbbb</td>
<td>(0952)26-64XX</td>
<td>eeeeee</td>
<td>ccccc</td>
<td>ddddd</td>
</tr>
<tr>
<td class="FreezingCol"><span>1</span> </td>
<td class="FreezingCol"> <span>aaaa</span> </td>
<td>bbbb</td>
<td>(0952)26-64XX</td>
<td>eeeeee</td>
<td>ccccc</td>
<td>ddddd</td>
</tr>
<tr>
<td class="FreezingCol"><span>1</span> </td>
<td class="FreezingCol"> <span>aaaa</span> </td>
<td>bbbb</td>
<td>(0952)26-64XX</td>
<td>eeeeee</td>
<td>ccccc</td>
<td>ddddd</td>
</tr>
<tr>
<td class="FreezingCol"><span>1</span> </td>
<td class="FreezingCol"> <span>aaaa</span> </td>
<td>bbbb</td>
<td>(0952)26-64XX</td>
<td>eeeeee</td>
<td>ccccc</td>
<td>ddddd</td>
</tr>
<tr>
<td class="FreezingCol"><span>1</span> </td>
<td class="FreezingCol"> <span>aaaa</span> </td>
<td>bbbb</td>
<td>(0952)26-64XX</td>
<td>eeeeee</td>
<td>ccccc</td>
<td>ddddd</td>
</tr>
<tr>
<td class="FreezingCol"><span>1</span> </td>
<td class="FreezingCol"> <span>aaaa</span> </td>
<td>bbbb</td>
<td>(0952)26-64XX</td>
<td>eeeeee</td>
<td>ccccc</td>
<td>ddddd</td>
</tr>
<tr>
<td class="FreezingCol"><span>1</span> </td>
<td class="FreezingCol"> <span>aaaa</span> </td>
<td>bbbb</td>
<td>(0952)26-64XX</td>
<td>eeeeee</td>
<td>ccccc</td>
<td>ddddd</td>
</tr>
<tr>
<td class="FreezingCol"><span>1</span> </td>
<td class="FreezingCol"> <span>aaaa</span> </td>
<td>bbbb</td>
<td>(0952)26-64XX</td>
<td>eeeeee</td>
<td>ccccc</td>
<td>ddddd</td>
</tr>
</table>
</div>
</body>
</html>


修改固定----------------------------------------title

<html>

<head>
<style>
table {
border-collapse:collapse;
border-spacing:0;
border-right-color:#00FFCC;
border-bottom-color:#00FFCC;
border-left-color:#00FFCC;
}
.tdStyle {
border-top: 3px solid #FF0000;
border-left:2px solid #FF0000;
border-right:1px solid #FF0000;
text-align:center;
position: relative;
width:150px;
background-color: #9ACD32;
left: expression(this.parentElement.offsetParent.parentElement.scrollLeft-1);
}
.trStyle{
height:50px;
z-index: 10;
position: relative;
top: expression(this.offsetParent.scrollTop-3);
}
</style>
</head>
<div id="freezingDiv" style="overflow:auto; width:600px; height:155px">
<table border="1">
<tr class="trStyle" >
<td class="tdStyle">发布日期：</td>
<td class="tdStyle">2010-11-10</td>
<td class="tdStyle">工作地点：</td>
<td class="tdStyle">宁波</td>
</tr>
<tr>
<td class="bkf0">性别要求：</td>
<td>女</td>
<td class="bkf0">年龄要求：</td>
<td>16-25岁</td>
</tr>
<tr>
<td class="bkf0">性别要求：</td>
<td>女</td>
<td class="bkf0">年龄要求：</td>
<td>16-25岁</td>
</tr><tr>
<td class="bkf0">性别要求：</td>
<td>女</td>
<td class="bkf0">年龄要求：</td>
<td>16-25岁</td>
</tr><tr>
<td class="bkf0">性别要求：</td>
<td>女</td>
<td class="bkf0">年龄要求：</td>
<td>16-25岁</td>
</tr>
<tr>
<td class="bkf0">性别要求：</td>
<td>女</td>
<td class="bkf0">年龄要求：</td>
<td>16-25岁</td>
</tr>
<tr>
<td class="bkf0">性别要求：</td>
<td>女</td>
<td class="bkf0">年龄要求：</td>
<td>16-25岁</td>
</tr><tr>
<td class="bkf0">性别要求：</td>
<td>女</td>
<td class="bkf0">年龄要求：</td>
<td>16-25岁</td>
</tr><tr>
<td class="bkf0">性别要求：</td>
<td>女</td>
<td class="bkf0">年龄要求：</td>
<td>16-25岁</td>
</tr>
</table>
</div>
</html>
-----------------------------------------------------------------
头和列固定
<html>
<style>

table{
border:1px solid red;
border-collapse:collapse;
width:600px;
}

.FreezingCol{
height:50px;
z-index: 10;
position: relative;
top: expression(this.offsetParent.scrollTop);
}
.trStyle{
border: 2px solid #FF0000;
text-align:center;
position: relative;
width:150px;
background-color: #9ACD32;
left: expression(this.parentElement.offsetParent.parentElement.scrollLeft);

}

.tdStyle{
z-index: 1;
position: relative;
left: expression(document.getElementById("freezingDiv").scrollLeft);
border:1px solid blue;
background-color: #FFEBCD;
width:100px;
}
</style>

<body>
<div id="freezingDiv" style="overflow:auto; width:400px; height:155px">
<table>

<tr class="FreezingCol">
<td class="tdStyle">ID</td><td class="trStyle">xxxx</td><td class="trStyle">xxxx</td><td class="trStyle">xxxx</td><td class="trStyle">xxxx</td>
</tr>
<tr>
<td class="tdStyle">1</td><td>xxxx</td><td>xxxx</td><td>xxxx</td><td>xxxx</td>
</tr>
<tr>
<td class="tdStyle">1</td><td>xxxx</td><td>xxxx</td><td>xxxx</td><td>xxxx</td>
</tr>
<tr>
<td class="tdStyle">1</td><td>xxxx</td><td>xxxx</td><td>xxxx</td><td>xxxx</td>
</tr>
<tr>
<td class="tdStyle">1</td><td>xxxx</td><td>xxxx</td><td>xxxx</td><td>xxxx</td>
</tr>
<tr>
<td class="tdStyle">1</td><td>xxxx</td><td>xxxx</td><td>xxxx</td><td>xxxx</td>
</tr>
<tr>
<td class="tdStyle">1</td><td>xxxx</td><td>xxxx</td><td>xxxx</td><td>xxxx</td>
</tr>
<tr>
<td class="tdStyle">1</td><td>xxxx</td><td>xxxx</td><td>xxxx</td><td>xxxx</td>
</tr>
<tr>
<td class="tdStyle">1</td><td>xxxx</td><td>xxxx</td><td>xxxx</td><td>xxxx</td>
</tr>
<tr>
<td class="tdStyle">1</td><td>xxxx</td><td>xxxx</td><td>xxxx</td><td>xxxx</td>
</tr><tr>
<td class="tdStyle">1</td><td>xxxx</td><td>xxxx</td><td>xxxx</td><td>xxxx</td>
</tr><tr>
<td class="tdStyle">1</td><td>xxxx</td><td>xxxx</td><td>xxxx</td><td>xxxx</td>
</tr><tr>
<td class="tdStyle">1</td><td>xxxx</td><td>xxxx</td><td>xxxx</td><td>xxxx</td>
</tr>
</tr>
</table>
</body>
</html>
css列名不动_利用js+css+html实现固定table的列头不动
weixin_39943000的博客
12-20 278
话不多说，跟这小编来一起看下吧1、CSS#scroll_head {position: absolute;display: none;}2、Javascript//该函数在上面一个table数据加载完成后调用//把表头的宽度设置到会滚动的页头去var copyWidth = function () {var b = $('#data_tbody').prev().find('t...
html表头和左侧固定js,JS固定表头及固定左边列
weixin_29735819的博客
06-03 1404
花了两个晚上的时间，终于搞定了固定表头功能。先上效果图(注：有背景图和灰色的行、列为固定的表头行和左边列，背景图是表格原有的样式，不是固定表头后添加的)指定要固定的行数和列数，兼容各浏览器，固定后的表头和左边列的样式外观完全复制原来的表格样式。可以设置固定整个表头，即Table中有设置了 ，可以固定整个thead；也可以按指定的行数固定。有一种情况不可以启用左边列固定，即当表头行中的相应的列的单元...
Js实现表格头部第一行下拉固定
09-04
Js实现表格头部第一行下拉固定
js 固定表头及固定列的js
weixin_30875157的博客
01-10 683
//给table 外层加一个div然后将divid传入方法，arr是一个数组里面填写需要固定的列数function fixedCol(arr,divId){ var colArr = arr || []; colArr.forEach(function(val){ $("#"+divId).scroll(function(){ var left = $("#"+d...
JS+CSS 实现表格头部固定
weixin_39475476的博客
01-19 465
JS+CSS表格头部固定
固定表头（行头列头）脚本
07-04
用javascript和css实现固定表格的行头列头。
bootstrap-table实现表头固定以及列固定的方法示例
10-17
这样即使用户滚动页面查看表格内容时，固定的表头或列依然可见，方便用户快速识别数据所在的列和行。 首先，要使用bootstrap-table实现表头固定以及列固定的功能，需要引入对应的JavaScript和CSS文件。这包括jQuery...
移动端table固定表头与固定第一列
02-20
总结起来，实现移动端table的固定表头与固定第一列，主要涉及HTML5的表格结构、CSS的定位和层叠上下文以及可能的JavaScript滚动事件处理。通过这些技术，我们能够在移动端提供更好的数据浏览体验。
asp.net html+table固定表头和左侧列.rar
08-20
例如，使用GridView的HeaderRow和Columns属性，配合JavaScript库如jQuery或纯CSS框架，如Bootstrap，可以轻松地创建具有固定表头和列的表格。 在实际应用中，开发者还需要考虑响应式设计，确保在不同设备和屏幕尺寸...
js实现表格部分固定
10-16
js实现表格部分固定，横向标题，纵向标题的固定。下载查看。
CSS 表头列头固定(实用)
11-22
实现列头和行头的固定,非常实用,能让你尽可能的改变最少的代码实现要求的功能.
js 实现 动态创建固定列数的表格
03-31
js 实现 动态创建固定列数的表格! 值得下载看看!资源免费,大家分享!!
表格固定列插件修复版本 - dataTable.fixedColumns.js
01-19
改版本为dataTable.fixedColumns.js修复版，解决固定列出现滚动条的问题，以及一些显示的处理
js实现table行列固定
07-29
引用JS,固定table的前n行及前n列， @*表格冻结*@ [removed] $(function () { $(".fixTable").tableHeadFixer({ "left": 0 }); $(".fixTable").tableHeadFixer({ "top": 1 }); }); [removed]
HTML+CSS+JS实现完美兼容各大浏览器的TABLE固定列
11-23
table表格完美指定固定行列方法，可以按照自己的需要定制自己的锁定列，只需要传入简单的几个参数即可，看完你会谢我的！如果不好使用的话可以联系我，我可以指导你们。测试过兼容的浏览器有谷歌，火狐，IE11！
利用样式给DataGrid添加表头固定和列固定
weixin_30662011的博客
12-26 229
昨天用添加模板列的方法练了个动态添加列，以适应DataGrid列根据数据库变化。用SetRenderMethodDelegate实现表头合并效果。今天看业务实在看不懂，没事之下，找了个模式，实现了表头和列的固定。不用只能用在ＩＥ５以上。 模式如下：1/**//*Divcontainertowrapthedatagrid*/2div#div-datagrid{3width:...
easyui datagrid 表头固定（垂直滚动条）、列固定（水平滚动条）
banshurenliyaping的博客
11-30 3396
最近用多了easyui 之后还是觉得它的功能还是很强大的。它原有的功能就已经能够满足90%以上的界面需求。 1、当数据行很多时，会呈现垂直的滚动条，但是向下滚动，表头却被淹没了，这不符合人类偷懒的特点（我怎么可能记得住每列的数据代表的意思！），所以需要固定表头。 datagrid.datagrid({ fit: true }); 对，没错，就是这个属性，就这么简单！我也是看了网上的各位大神之后才懂。我看了多遍easyui的api（当然是中文的）没有！！下次看看英文...
jQuery插件冻结行列、固定列固定行，html、table实现
06-05
基于jquery的冻结行冻结列插件，可以支持复合表头，对原业务代码侵入较小，非常适合需要实现固定行列对table场景
js固定表头和第一列固定
03-15
js固定表头和第一列固定 可托动，表头会跟着动，列下拉也会动，
兼容IE8+的JS表格固定表头和列解决方案
3. 使用JavaScript动态计算固定列和滚动列的宽度，并在滚动时动态调整固定列的位置。 ### 知识点三：全浏览器兼容性 兼容性是Web开发中的关键一环。在本案例中，我们需要注意IE8及以上版本浏览器的兼容性问题。IE8...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值