实现table表格固定顶部标题栏和左侧标题栏

已于 2022-11-08 16:55:43 修改
阅读量878 收藏 3
点赞数 2
分类专栏： 前端 css table 文章标签： css 前端 html
于 2022-11-08 16:53:01 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/CSDN_0927/article/details/127753690
版权
前端 同时被 3 个专栏收录
4 篇文章 0 订阅
订阅专栏
css
1 篇文章 0 订阅
订阅专栏
table
1 篇文章 0 订阅
订阅专栏 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
.main{
        width: 1500px;
        overflow:auto;
        height:600px;  /* 设置固定高度 */
    }
td {
    /* 设置td,th宽度高度 */
    border:1px solid gray;
    width:100px;
    height:30px;
}

table {
    table-layout: fixed;
    width: 200px; /* 固定宽度 */
}

.frozenRow{
    position:sticky;
    z-index:1;
    background: #ccc;
}

.frozenColumn{
    position:sticky;
    z-index:1;
    background: #f00;
}

.frozenColumnRow
{
    z-index:2;
    background-color:#f00;
}

    </style>
</head>
<body>
    <div  class="main">
            <table  cellspacing="0" >
                <tbody style="position:relative;">
                    <tr>
                        <td style="width: 100px;">序号</td>
                        <td style="width: 100px;">水果</td>
                        <td  style="width: 200px;">内容</td>
                        <td  style="width: 300px;">内容</td> 
                        <td>内容</td>
                        <td>内容</td>
                        <td>内容</td>
                        <td style="width: 500px;">内容</td>
                        <td style="width: 300px;">内容</td>
                        <td style="width: 300px;">内容</td>
                    </tr>
                    <tr>
                        <td style="width: 100px;">序号</td>
                        <td  style="width: 100px;">水果</td>
                        <td  style="width: 200px;">内容</td>
                        <td  style="width: 300px;">内容</td> 
                        <td>内容</td>
                        <td>内容</td>
                        <td>内容</td>
                        <td style="width: 500px;">内容</td>
                        <td style="width: 300px;">内容</td>
                        <td style="width: 300px;">内容</td>
                    </tr>
                    <tr>
                        <td>1</td>
                        <td>苹果</td>
                        <td>1111111</td>
                        <td>1111111</td>
                        <td>1111111</td>
                        <td>1111111</td>
                        <td>1111111</td>
                        <td>1111111</td>
                        <td>1111111</td>
                        <td>1111111</td>
                    </tr>
                    <tr>
                        <td>2</td>
                        <td>苹果</td>
                        <td>1111111</td>
                        <td>1111111</td>
                        <td>1111111</td>
                        <td>1111111</td>
                        <td>1111111</td>

                    </tr>
                    <tr>
                        <td>3</td>
                        <td>苹果</td>
                        <td>1111111</td>

                    </tr>
                    <tr>
                        <td>4</td>
                        <td>苹果</td>
                        <td>1111111</td>
                        <td>苹果</td>
                        <td>1111111</td>
                        <td>1111111</td>
                        <td>1111111</td>
                        <td>1111111</td>
                        <td>1111111</td>

                    </tr>
                    <tr>
                        <td>5</td>
                        <td>苹果</td>
                        <td>1111111</td>

                    </tr>
                    <tr>
                        <td>6</td>
                        <td>苹果</td>
                        <td>1111111</td>

                    </tr>
                    <tr>
                        <td>7</td>
                        <td>苹果</td>
                        <td>1111111</td>
                        <td>苹果</td>
                        <td>1111111</td>
                        <td>1111111</td>
                        <td>1111111</td>
                        <td>1111111</td>
                        <td>1111111</td>
                        <td>1111111</td>


                    </tr>
                    <tr>
                        <td>8</td>
                        <td>苹果</td>
                        <td>1111111</td>

                    </tr>
                    <tr>
                        <td>9</td>
                        <td>苹果</td>
                        <td>1111111</td>
                        <td>苹果</td>
                        <td>1111111</td>
                        <td>1111111</td>
                        <td>1111111</td>
                        <td>1111111</td>
                        <td>1111111</td>
                        <td>1111111</td>


                    </tr>
                    <tr>
                        <td>10</td>
                        <td>苹果</td>
                        <td>1111111</td>

                    </tr>
                    <tr>
                        <td>11</td>
                        <td>苹果</td>
                        <td>1111111</td>

                    </tr>
                    <tr>
                        <td>12</td>
                        <td>苹果</td>
                        <td>1111111</td>

                    </tr>
                    <tr>
                        <td>13</td>
                        <td>苹果</td>
                        <td>1111111</td>

                    </tr>
                    <tr>
                        <td>14</td>
                        <td>苹果</td>
                        <td>1111111</td>

                    </tr>
                    <tr>
                        <td>15</td>
                        <td>苹果</td>
                        <td>1111111</td>

                    </tr>
                    <tr>
                        <td>14</td>
                        <td>苹果</td>
                        <td>1111111</td>

                    </tr>
                    <tr>
                        <td>15</td>
                        <td>苹果</td>
                        <td>1111111</td>

                    </tr>
                    <tr>
                        <td>14</td>
                        <td>苹果</td>
                        <td>1111111</td>

                    </tr>
                    <tr>
                        <td>15</td>
                        <td>苹果</td>
                        <td>1111111</td>

                    </tr>
                    <tr>
                        <td>14</td>
                        <td>苹果</td>
                        <td>1111111</td>

                    </tr>
                    <tr>
                        <td>15</td>
                        <td>苹果</td>
                        <td>1111111</td>

                    </tr> <tr>
                        <td>14</td>
                        <td>苹果</td>
                        <td>1111111</td>

                    </tr>
                    <tr>
                        <td>15</td>
                        <td>苹果</td>
                        <td>1111111</td>

                    </tr>
                    <tr>
                        <td>14</td>
                        <td>苹果</td>
                        <td>1111111</td>

                    </tr>
                    <tr>
                        <td>15</td>
                        <td>苹果</td>
                        <td>1111111</td>

                    </tr>
                </tbody>
            </table>
        </div>

</body>

<script>



  //列冻结
  function frozenColumn(column)
  {  
   let tdLeft = 0;
   for(let i= 1 ; i<= column ; i++){
     let currentTds = document.querySelectorAll(`td:nth-child(${i})`);
     currentTds.forEach((item)=> {
        item.classList.add('frozenRow')
    })
    let frozenRow = currentTds[0];
    currentTds.forEach((item)=> {
        item.style.left = `${tdLeft}px`;
    })
    tdLeft+= frozenRow.offsetWidth;
    frozenCrossChild();
}
  }

//行冻结
  function frozenRow(row)
  {
    let tdTop = 0;
    for(let i= 1 ; i<= row ; i++){
    let currentTds = document.querySelectorAll(`tr:nth-child(${i}) td`);
    currentTds .forEach((item)=> {
        item.classList.add('frozenColumn')
    })
    let frozenRow = currentTds[0];
    currentTds.forEach((item)=> {
        item.style.top = `${tdTop}px`;
    })
    tdTop+= frozenRow.offsetHeight;
    }
    frozenCrossChild();
  }

 

//单独处理交叉元素
  function frozenCrossChild()
  {
    let frozenColumnRow = document.querySelectorAll('.frozenColumn.frozenRow');
    frozenColumnRow.forEach((item)=> {
        item.classList.add('frozenColumnRow')
    })
  }

     frozenColumn(2); //从1到2列 全部固定
     frozenRow(5);  //从1-5行 全部固定
     
</script>
</html>

实现table表格固定顶部标题栏和左侧标题栏。

如图：

第1-5行全部固定,第1-2列全部固定

 

csdn_0927
关注
  • 2
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
asp.net html+table固定表头和左侧列.rar
08-20
html+ table 固定表头和左侧列，可以直接套用在asp.net中，非常方便好用。
elementui表格实现顶部和左侧双表头
qq_55874738的博客
04-24 3783
前端在需要数据对比的场景下，实现表格双表头
vue 列表顶部title和侧边title滑动时固定
WMW_wmw的博客
01-12 815
内容循环，标题固定，通过滑动scroll方法动态获取滑动的像素，然后给title动态添加偏移px html <div class="box-background"> <div class="box-side" ref="boxSide"> 侧边title <div v-for="(item, index) in QueryTomb" :key="index">{{ item.Name }}</div>
vue实现表格表头在左侧，并且固定表头
最新发布
m0_61480985的博客
03-28 663
前段时间一个h5端的项目，需要实现一个表格，然后表格的表头放在左侧一列，并且左右滚动的时候需要固定表头，不能随着滚动条滚动一起动。但是在网上找了很多类似的，思路是可以的，就是没有一个是我能运行起来的，最后就决定自己写一个。
elementui 表格左侧与顶部表头
qq_53439433的博客
10-25 4036
同时出现左侧与顶部标题，需要对数据进行特殊处理
实现锁定上标题栏和左标题栏的table表格---最佳实践
浪漫鼠
12-15 3271
实现一个可以锁定上标题栏和左标题栏的table，左右上下都可以滚动！ 在html界面上实现这个功能，花了一下午加一个早晨，试了很多办法，只有这一种方法最靠谱，其他实现都过于复杂，而且存在各种各样的问题，只能满足一部分需求。 本文案例应被评为最佳实践...^_^ 实现两步骤： 1 画前端页面 (1)在html界面上添加一个大的div层，规定最大长宽，最外边的层最好大一点。
HTML 表格table tr td、表头标题、表结构、合并单元格
七七的博客
03-04 9761
表格的主要作用 表格主要用于显示、展示数据，因为它可以让数据显示的非常的规整,可读性非常好。 特别是后台展示数据的时候,能够熟练运用表格就显得很重要。 一个清爽简约的表格能够把繁杂的数据表现得很有条理。 表格不是用来布局页面的，而是用来展示数据的。 <table> <tr> <td>单元格内的文字</td> </tr> </...
html 表格 左侧表头,左侧是表头的JS表格控件(自写,网上没有的)
weixin_42447681的博客
06-02 1207
今天，项目中要用到该表格，找了一遍，发现没有合适的，于是自己动手丰衣足食。最终呈现效果如上图，1、左侧是表头的表格数据展现，2、支持多行，多表头3、固定表头的功能4、能够支持标题5、获取表格中的数据6、支持IE/CHROME7、 表格能够自适应根据内容行居中Grid左侧固定测试var test = new LeftHeadGrid({id: "leftHeadGrid",width: 800,t...
移动端table固定头部和左侧栏
贪睡的小聪
02-21 2168
使用stick实现 stick实现是可以实现的，但是问题在于移动端的ios 会滚出去边界的时候有回弹效果，就很操蛋 我看简书上有人尝试了挺多种方法去解决，但是效果并不好 https://www.jianshu.com/p/6863ae08c76c 有人可能会说直接用wekit-overflow-scrolling 配置解决就好了鸭 以前还是可以这样去设置的，但是我查阅了很多的资料 在ios13的版本之后就不再支持这个属性配置 那到底如何解决呢，我们先来分析一下为什么ios会产生回弹效果 .box-c
table原生固定表头和固定列实现
A good man
08-23 893
【代码】table原生固定表头和固定列实现。
HTML代码单元格内标题置顶,css表格标题怎么设置位置？
weixin_42237925的博客
05-30 825
我们可以通过设置css caption-side属性的相关属性值来指定表格标题(caption标签)的位置，即：可以使用caption-side属性来指定了标题位于表格的哪一侧。在table表格中，caption标签是用于为表格提供简短的标题，如标题或简短描述。caption标签是插在开始标记之后，应该始终是表的第一个子项。然后我们就可以使用caption-side属性更改其在表中的位置了。我们可...
html固定标题列、标题头table具体实现代码
09-28
为了布局的美观度需要在html中固定标题列、标题头，本文整理了一些相关实现技巧，经测试还不错，感兴趣的朋友可以参考下哈，希望对你有所帮助
JS实现table表格固定表头且表头随横向滚动而滚动
10-19
主要介绍了JS实现table表格固定表头且表头可以随横向滚动而滚动,需要的朋友可以参考下
asp.net实现固定GridView标题栏的方法(冻结列功能)
01-03
本文实例讲述了asp.net实现固定GridView标题栏的方法。分享给大家供大家参考，具体如下： <%@ Page Language=C# %> <%@ Import Namespace=System.Data %> <!DOCTYPE ...
Angular8 实现table表格表头固定效果
10-15
主要介绍了Angular8 实现table表格表头固定效果，表头固定，内部实现滚动条效果，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
table 例1、左侧固定，右侧滑动 例2、固定顶部第一行，左边第一行，例3，可固定左侧和顶侧
jack_rose_me的博客
02-23 1096
<!DOCTYPEhtml> <html> <headlang="en"> <metacharset="UTF-8"> <title>模拟表格</title> </head> <body> <styletype="text/css"rel="stylesheet"> .tableOut{ width:200px; ...
vue表格实现固定表头首列
ICode联盟
10-17 302
vue表格实现固定表头首列。
Table实现将表头放在右侧，数据在左侧
Mozifei73的博客
02-01 1180
table表头在右侧
css实现固定table表格
06-09
要实现固定表格，可以使用CSS中的position和overflow属性，具体步骤如下： 1. 给表格外层容器div设置固定高度和宽度，overflow属性设置为auto或scroll，这样就会出现滚动条。 2. 将表格放在容器div内，并设置表格的宽度为100%。 3. 给表格的thead和tbody分别设置position属性为sticky，top属性为0，这样表头就能固定在页面顶部。 4. 如果表格有左侧固定列，可以将左侧列单独放在一个table中，然后设置这个table的position属性为absolute，left属性为0，这样左侧列就能固定在页面左侧。 CSS代码示例如下： ``` .table-container { width: 500px; height: 300px; overflow: auto; } table { width: 100%; } thead th, tbody td { position: sticky; top: 0; } .left-column { position: absolute; left: 0; } ```

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值