JS和CSS固定标题列与首列

最新推荐文章于 2023-04-12 12:50:26 发布
最新推荐文章于 2023-04-12 12:50:26 发布
阅读量1k 收藏 1
点赞数
分类专栏： html css Javascript 文章标签： JS和CSS固定标题列与首列
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/linrenchao/article/details/44853975
版权


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>JS和CSS固定标题列与首列</title>
    <script type="text/javascript" src="jquery-1.7.1.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                //#region table滚动处理
                var top = 0;
                var left = 0;
                var el = document.getElementById("myBody");
                var ths = el.getElementsByTagName("th");

                el.onscroll = function (e) {
                    var tempTop = el.scrollTop;
                    var tempLeft = el.scrollLeft;

                    if (top != tempTop) {
                        top = tempTop;
                        for (var i = 0; i < ths.length; i++) {
                            ths[i].style.top = tempTop + "px";
                        }
                    }
                    if (left != tempLeft) {
                        left = tempLeft;
                        $(".locked").css("left", tempLeft + "px");
                    }
                }
                //#endregion
            })
    </script>
    <style type="text/css">
        #myRepeater td, #myRepeater th
        {
            border: 0.1px solid #cccccc;
            white-space: nowrap;     /*文本不进行换行*/
            text-align: center;
        }
        #myRepeater th
        {
            position: relative;
            z-index: 1;
        }
        #myRepeater th.locked
        {
            z-index: 2;
        }
        #myRepeater td.locked
        {
            position: relative;
            left: 0px;
            background-color: red;
        }
    </style>
</head>
<body>
  <div id='myBody' style="width: 250px; height: 100px; overflow: scroll; margin: auto;" align = 'center'>
    <table id='myRepeater' cellspacing="0" align = 'center'>
        <tr style='background-color: rgb(50,152,120);'>
            <th  class='locked'>姓名</th>
            <th>年龄</th>
            <th>性别</th>
            <th>籍贯1</th>
            <th>籍贯2</th>
            <th>籍贯3</th>
            <th>籍贯4</th>
            <th>籍贯5</th>
        </tr>
        <tr>
            <td  class='locked'>张三</td>
            <td>21</td>
            <td>男</td>
            <td>汉族</td>
            <td>汉族</td>
            <td>汉族</td>
            <td>汉族</td>
            <td>汉族</td>
        </tr>
        <tr>
            <td  class='locked'>李四</td>
            <td>22</td>
            <td>男</td>
            <td>彝族</td>
            <td>彝族</td>
            <td>彝族</td>
            <td>彝族</td>
            <td>彝族</td>
        </tr>
        <tr>
            <td  class='locked'>程柳</td>
            <td>22</td>
            <td>女</td>
            <td>汉族</td>
            <td>汉族</td>
            <td>汉族</td>
            <td>汉族</td>
            <td>汉族</td>
        </tr>
        <tr>
            <td  class='locked'>张三</td>
            <td>21</td>
            <td>男</td>
            <td>汉族</td>
            <td>汉族</td>
            <td>汉族</td>
            <td>汉族</td>
            <td>汉族</td>
        </tr>
        <tr>
            <td  class='locked'>李四</td>
            <td>22</td>
            <td>男</td>
            <td>彝族</td>
            <td>彝族</td>
            <td>彝族</td>
            <td>彝族</td>
            <td>彝族</td>
        </tr>
        <tr>
            <td  class='locked'>程柳</td>
            <td>22</td>
            <td>女</td>
            <td>汉族</td>
            <td>汉族</td>
            <td>汉族</td>
            <td>汉族</td>
            <td>汉族</td>
        </tr>
    </table>
    </div>
</body>
</html>

丁葵草
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
javascript 绘制表格table,可以固定首行,首列
12-22
javascript 绘制表格table,可以固定首行,首列,其他内容滚动显示.兼容ie,firefox,chrome等浏览器.
css+js简单实现table固定首行首列
guicaizhou的专栏
07-31 8437
说明： 使用easyui等都可以实现table固定首行首列的功能。 但仅仅只需要这一个功能，完全可以用css+js简单实现而不用引入更多工具。 网上找到很多的思路，自己对其中比较简单的一个进行了整理。 大致效果： Paste_Image.png 页面布局： Paste_Image.png 如上图： 1、整个页面分成 左右 两部分： 2、左边分为 上下 两部分
js 固定列
言凡的博客
10-11 916
fixColum: function (ids) { $("#" + ids).scroll(function () {//给table外面的div滚动事件绑定一个函数 var left = $(this).scrollLeft();//获取滚动的距离 var trs = $("#"+ids+" table tr");//获取表格的所有tr ...
js表头固定,固定table标题行
11-15
jquery表头固定，有两种情况，请参照，jquery请自行附加，就不上传了。
js 实现table标题固定
你好邱林和的专栏
10-20 2268
使用ScrollTableFixed插件可以很好的实现这一效果，他的github地址：https://github.com/doska80/ScrollTableFixed，demo地址如下：https://github.com/doska80/ScrollTableFixed/blob/master/ScrollTableFixed/index.html，
关于js表格固定列实现
商嘉航的博客
12-17 2435
一、概述 在开发过程中前端列表展示数据对比查看的情况是比较常见的，我最近接到的一个任务就是要处理这样的数据；一般这种需求将某一列或几列进行横向固定然后其它不固定的列可以照常实现x轴的滚动； 话不多说先上图： 需求设计 这里实现了表格的x轴横向固定列和非固定列的滚动； 实现了表格y轴同步滚动； 实现思路 实现滚动条大家都知道怎么处理，但是设计固定列我一开始没有什么具体的想法，本来是考虑把...
固定表格的标题列(CSS)
chonboy的专栏
11-24 806
来源：http://dev.csdn.net/develop/article/51/article/51/51967.shtmhttp://dev.csdn.net/develop/article/51/51972.shtm例1：  table#headers {table-layout:fixed;background:#eea033;}table#data {table-layout:rela
js固定表头和第一列固定
03-15
js固定表头和第一列固定 可托动，表头会跟着动，列下拉也会动，
Html纯js固定表头、左侧首列
12-13
Html纯js固定表头、左侧首列，无须使用第三方插件
JS固定表头和左边列（最新源码）1.9
03-31
锁定表头及固定左边列，原生JS原创代码 需要注意的问题： 1.表格的宽度以及表格每一列的宽度需要固定（特殊情况除外：当表格列数少并且表格总宽度明显小于表格父容器的宽度时，也就是表格列不存在自动换行的问题） 2.表格父容器尺寸大小改变时，需要调用 setBoxSize 方法，目的是判断父容器是否出现滚动条 1.1 修正了对IE6、IE7的兼容问题 1.2 修正了固定行、列的样式问题 1.3 IE6/IE7浏览器 不启用该功能 1.4 增加了拆分线， 修正了重复生成锁定行列的问题以及生成错位的问题， 修正了行、列事件无法复制的问题， 增加了IE6/IE7/IE8 启用设置参数（ieLowVersionEnabled: true|false) ，默认不启用， 注：IE6/7/8锁定表头 由于兼容性问题，有些情况下会有一些错位的问题 1.5 增加了 显示/隐藏功能，修正了非IE浏览器下列宽错位问题 1.6 修正了当有合并单元格时，锁定单元格错位的问题，修正了表格行数较多时的性能问题 1.7 表格单元格可以不指定宽度（锁定时，取实际的单元格宽度），当单元格的左右两边的borderWidth不一样时，会有一些错位 若单元格宽度是固定的，可以在第3个参数(config)中指定 isFixedSize:true 修正表头列未锁定的Bug 1.8 修正表格含有thead时的样式丢失问题，以及行数设置问题，修正thead/tbody行归属问题 1.9 移除tbTopLeft的边框线 修正表格cellpadding/cellspacing的设置问题 修复Firefox下的padding导致的错位问题 修复thead复制没有底部分割线的问题 修复thead复制时无背景色的问题 增加复选框同步功能（如果是JS代码设置复选框选中，需要调用 .setCheckBoxSync()方法） .setCheckBoxSync 方法参数说明：4种参数 1) 复选框控件（html object）数组 2) 复选框控件（html object） 3) 复选框控件ID (string) 4) 空参数（尽量不用空参数）
js 实现 动态创建固定列数的表格
03-31
js 实现 动态创建固定列数的表格! 值得下载看看!资源免费,大家分享!!
js实现table行列固定
07-29
引用JS,固定table的前n行及前n列， @*表格冻结*@ [removed] $(function () { $(".fixTable").tableHeadFixer({ "left": 0 }); $(".fixTable").tableHeadFixer({ "top": 1 }); }); [removed]
JS锁定tabel标题行
03-13
有时grid的数据呈现太多，页面出现滚动条时，用户无法看到标题行。用简单易懂的方式，实现了Grid或Table中标题行的自动锁定。当滚动条拉动让table滚至顶部时，table标题行自动锁定，不会被隐藏。而滚动条拉动让table向下拉时，table标题行也会自动解除锁定。对项目开发非常好用
html的table滚动时固定首行和首列
11-26
html的table滚动时固定首行和首例，网上多为3个table拼合实现，现使用一个table实现
用css实现标题或者菜单到顶部固定
最新发布
weixin_52113974的博客
04-12 592
用原生html和css实现粘性定位，用原生html和css实现标题或者菜单到页面顶部自动停住
css固定表格titile和首列的实现
Jimmybly Lee 的专栏
06-26 2020
      经过几天的学习，稍微了解了些div+css的网站布局的思路和好处。      本来是confuseLing给我发来了一段代码，实现了锁定title和first col的css，但是在用户体验上并不好，我整理了一下。言归正传，直接说这个的实现。test.css:.firstRow {...}{ background-color:#CC9900;top:expression(t
关于javaScript定位 position语法
Too_Soup_Soup的博客
03-26 2380
position定位 static //默认定位 relative //相对定位 absolute //绝对定位 fixed //固定定位 sticky //粘性定位 1.static(固定定位) 不脱离文档流 2.relative（相对定位）不脱离文档流 元素相对于自己元素的初始位置作为参照 3.absolute（绝对定位）脱离文档流 元素相对于离自己最近的父类元素作为参照 4.fixed（固定定位） 脱离文档流 元素相对于自己最近的父类元素作文参照 5.sticky（粘性定位）脱离文档流 元素相.
table固定列html5,css+js简单实现table固定首行首列
weixin_29007809的博客
07-09 1353
说明：使用easyui等都可以实现table固定首行首列的功能。但仅仅只需要这一个功能，完全可以用css+js简单实现而不用引入更多工具。网上找到很多的思路，自己对其中比较简单的一个进行了整理。大致效果：Paste_Image.png页面布局：Paste_Image.png如上图：1、整个页面分成 左右 两部分：2、左边分为 上下 两部分3、右边分为 上下 两部分(红色框比较特殊，多加一个div为...
原生 js、html 写一个有固定列滚动的 table
hello，是翠花呀
08-25 2650
像 element-ui 和 ant-ui 这些 UI 库他们提供的 table 组件都是可以设置固定列的，比如左边固定则滚动的时候左边不会随着滚动而看不见，右边固定则右侧一列是固定住不动的。 接下来直接用 html 和 js 来尝试一下这种 table 的效果。 - 一：固定列 这里我想使用`position: sticky;`直接达到相对 table 列的固定效果，不需要改变 dom 的结构。 - 二：阴影 阴影的效果是，当 table 往右边滚，则左固定列显示阴影效果；当 table 往

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值