【Web】双表头固定，内容可滚动的Table实现

最新推荐文章于 2023-04-14 13:34:06 发布
最新推荐文章于 2023-04-14 13:34:06 发布
阅读量918 收藏 2
点赞数 3
分类专栏： 『前端』 文章标签： table overflow 表头固定 滚动
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-NC-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/shaotaiban1097/article/details/88752385
版权
效果描述

table 有横向和纵向两个表头。其数据可以随滚动条滚动。
横向滚动条移动时，左侧纵表头保持不动，上侧横向表头跟随移动；
纵向滚动条移动时，上侧横表头保持不动，左侧纵向表头跟随移动；

动态效果图

of

实现原理

4 个 div + 绝对定位（absolute） + JS的onscroll 事件监听

源码
<!DOCTYPE html>
<html lang="en">
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<style>
    table {
        /*margin: auto;*/
        /*width: 80%;*/
        border-collapse: collapse;
    }

    td {
        border: solid 1px #000;
        width: 100px;
        height: 20px;
        text-align: center;
    }

    thead {
        background-color: #888888;
        border: black;
        text-align: center;
    }


    /*左上角固定*/
    #div1 {
        position: fixed;
        height: 20px;
        width: 200px;
    }

    #tb1 {

    }


    /*横向表头 纵向固定 横向跟随滚动*/
    #div2 {
        position: absolute;
        height: 20px;
        width: 1400px;
        margin-left: 200px;

        overflow: hidden;
    }

    #tb2 {
        width: 2000px;
        position: absolute;
    }

    /*纵向表头 横向固定 纵向跟随滚动*/
    #div3 {
        position: absolute;
        height: 200px;
        width: 200px;
        margin-top: 20px;
        overflow-y: hidden;
    }

    #tb3 {
        height: 200px;
        position: absolute;
    }


    #div4 {
        position: absolute;
        /*height: 200px;*/
        /*width: 1400px;*/
        height: 217px;
        width: 1417px;
        margin-top: 20px;
        margin-left: 200px;

        overflow: auto;
    }

    #tb4 {
        width: 2000px;
        height: 200px;
    }

    /*滚动条样式*/
    div::-webkit-scrollbar {
        width: 17px; /*垂直滚动条的宽度*/
        height: 17px; /*水平滚动条的宽度*/
    }

    /*滑块样式*/
    div::-webkit-scrollbar-thumb {
        border-radius: 5px;
        -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
        background: bisque;
    }

    /*轨道样式*/
    div::-webkit-scrollbar-track {
        border-radius: 0;
        -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
        background: aquamarine;
    }

</style>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="div1">
    <table id="tb1">
        <thead>
        <tr>
            <td>固定</td>
            <td>固定</td>
        </tr>
        </thead>
    </table>
</div>
<div id="div2">
    <table id="tb2">
        <thead>
        <tr>
            <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>纵向固定10</td>
            <td>纵向固定11</td>
            <td>纵向固定12</td>
            <td>纵向固定13</td>
            <td>纵向固定14</td>
            <td>纵向固定15</td>
            <td>纵向固定16</td>
            <td>纵向固定17</td>
        </tr>
        </thead>
    </table>
</div>
<div id="div3">
    <table id="tb3">
        <thead>
        <tr>
            <td>横向固定1</td>
            <td>横向固定1</td>
        </tr>
        <tr>
            <td>横向固定2</td>
            <td>横向固定2</td>
        </tr>
        <tr>
            <td>横向固定3</td>
            <td>横向固定3</td>
        </tr>
        <tr>
            <td>横向固定4</td>
            <td>横向固定4</td>
        </tr>
        <tr>
            <td>横向固定5</td>
            <td>横向固定5</td>
        </tr>
        <tr>
            <td>横向固定6</td>
            <td>横向固定6</td>
        </tr>
        <tr>
            <td>横向固定7</td>
            <td>横向固定7</td>
        </tr>
        <tr>
            <td>横向固定8</td>
            <td>横向固定8</td>
        </tr>
        <tr>
            <td>横向固定9</td>
            <td>横向固定9</td>
        </tr>
        <tr>
            <td>横向固定10</td>
            <td>横向固定10</td>
        </tr>
        <tr>
            <td>横向固定11</td>
            <td>横向固定11</td>
        </tr>
        <tr>
            <td>横向固定12</td>
            <td>横向固定12</td>
        </tr>
        <tr>
            <td>横向固定13</td>
            <td>横向固定13</td>
        </tr>
        <tr>
            <td>横向固定13</td>
            <td>横向固定13</td>
        </tr>
        <tr>
            <td>横向固定14</td>
            <td>横向固定14</td>
        </tr>
        <tr>
            <td>横向固定15</td>
            <td>横向固定15</td>
        </tr>
        <tr>
            <td>横向固定16</td>
            <td>横向固定16</td>
        </tr>
        </thead>
    </table>
</div>
<div id="div4">
    <table id="tb4">
        <tr>
            <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>数据10</td>
            <td>数据11</td>
            <td>数据12</td>
            <td>数据13</td>
            <td>数据14</td>
            <td>数据15</td>
            <td>数据16</td>
            <td>数据17</td>
        </tr>
        <tr>
            <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>数据10</td>
            <td>数据11</td>
            <td>数据12</td>
            <td>数据13</td>
            <td>数据14</td>
            <td>数据15</td>
            <td>数据16</td>
            <td>数据17</td>
        </tr>
        <tr>
            <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>数据10</td>
            <td>数据11</td>
            <td>数据12</td>
            <td>数据13</td>
            <td>数据14</td>
            <td>数据15</td>
            <td>数据16</td>
            <td>数据17</td>
        </tr>
        <tr>
            <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>数据10</td>
            <td>数据11</td>
            <td>数据12</td>
            <td>数据13</td>
            <td>数据14</td>
            <td>数据15</td>
            <td>数据16</td>
            <td>数据17</td>
        </tr>
        <tr>
            <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>数据10</td>
            <td>数据11</td>
            <td>数据12</td>
            <td>数据13</td>
            <td>数据14</td>
            <td>数据15</td>
            <td>数据16</td>
            <td>数据17</td>
        </tr>
        <tr>
            <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>数据10</td>
            <td>数据11</td>
            <td>数据12</td>
            <td>数据13</td>
            <td>数据14</td>
            <td>数据15</td>
            <td>数据16</td>
            <td>数据17</td>
        </tr>
        <tr>
            <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>数据10</td>
            <td>数据11</td>
            <td>数据12</td>
            <td>数据13</td>
            <td>数据14</td>
            <td>数据15</td>
            <td>数据16</td>
            <td>数据17</td>
        </tr>
        <tr>
            <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>数据10</td>
            <td>数据11</td>
            <td>数据12</td>
            <td>数据13</td>
            <td>数据14</td>
            <td>数据15</td>
            <td>数据16</td>
            <td>数据17</td>
        </tr>
        <tr>
            <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>数据10</td>
            <td>数据11</td>
            <td>数据12</td>
            <td>数据13</td>
            <td>数据14</td>
            <td>数据15</td>
            <td>数据16</td>
            <td>数据17</td>
        </tr>
        <tr>
            <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>数据10</td>
            <td>数据11</td>
            <td>数据12</td>
            <td>数据13</td>
            <td>数据14</td>
            <td>数据15</td>
            <td>数据16</td>
            <td>数据17</td>
        </tr>
        <tr>
            <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>数据10</td>
            <td>数据11</td>
            <td>数据12</td>
            <td>数据13</td>
            <td>数据14</td>
            <td>数据15</td>
            <td>数据16</td>
            <td>数据17</td>
        </tr>
        <tr>
            <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>数据10</td>
            <td>数据11</td>
            <td>数据12</td>
            <td>数据13</td>
            <td>数据14</td>
            <td>数据15</td>
            <td>数据16</td>
            <td>数据17</td>
        </tr>
        <tr>
            <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>数据10</td>
            <td>数据11</td>
            <td>数据12</td>
            <td>数据13</td>
            <td>数据14</td>
            <td>数据15</td>
            <td>数据16</td>
            <td>数据17</td>
        </tr>
        <tr>
            <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>数据10</td>
            <td>数据11</td>
            <td>数据12</td>
            <td>数据13</td>
            <td>数据14</td>
            <td>数据15</td>
            <td>数据16</td>
            <td>数据17</td>
        </tr>
        <tr>
            <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>数据10</td>
            <td>数据11</td>
            <td>数据12</td>
            <td>数据13</td>
            <td>数据14</td>
            <td>数据15</td>
            <td>数据16</td>
            <td>数据17</td>
        </tr>
        <tr>
            <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>数据10</td>
            <td>数据11</td>
            <td>数据12</td>
            <td>数据13</td>
            <td>数据14</td>
            <td>数据15</td>
            <td>数据16</td>
            <td>数据17</td>
        </tr>
        <tr>
            <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>数据10</td>
            <td>数据11</td>
            <td>数据12</td>
            <td>数据13</td>
            <td>数据14</td>
            <td>数据15</td>
            <td>数据16</td>
            <td>数据17</td>
        </tr>
    </table>
</div>
<script>

    var div4 = $("#div4").get(0);
    var tb2 = $("#tb2").get(0);
    var tb3 = $("#tb3").get(0);

    div4.onscroll = function () {
        tb2.style.left = div4.scrollLeft * -1 + 'px'
        tb3.style.top = div4.scrollTop * -1 + 'px';
    }

</script>
</body>
</html>
HolaSecurity
关注
  • 3
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
如何实现table表头固定但是tbody可以滚动【附源码实例】
赏樱看雪撸代码
12-06 3353
table表头固定，自定义tbody高度，tbody设置高度失效，tbody设置高度不生效，tr设置高度，tbody滚动条
Table的思索(二):表头固定而内容滚动的表格
热门推荐
甘焕的博客
08-03 2万+
产品要求表格的表头固定，而内容在超出table的高度后，还能自由滚动，难度较高，本文尝试了几种常用方法，但都经历了失败，最后给出了一种可行的解决方案。
table表头固定只让内容滚动
2³
07-15 3654
table表格实现表头固定，只内容滚动。
table头部固定，内容滚动
weixin_33921089的博客
04-28 348
可以设置两个table,th,td得设置宽度： <table> <thead> <tr><th></th></tr> </thead> </table> <div style="max-height:500px;over...
实现在一个TABLE表中，保持表头不动，固定表头
java的涟漪
09-22 375
&lt;html&gt;&lt;head&gt;&lt;title&gt;&lt;/title&gt;&lt;style&gt; //此式样将第一行一直保留在页面上，不随滚动条的移动而移动.Freezing_tdd { top:expression(document.getElementById('div-1').scrollTop-1); position:relative ; } &l...
JavaScript实现两个Table固定表头根据页面大小自行调整
12-12
代码如下: <%@ page language=”java” ... charset=UTF-8″ pageEncoding=”UTF-8″%> <!... <head> <... [removed] /** * @param oTarget 需要加载scroll的dom对象 * @param fnHandler 处理的回调函数
DataGridView双表头和自动合计栏及打印自适应
08-12
首先，双表头在DataGridView中的实现通常是通过在列标题行上添加额外的行来完成的。这可以为用户提供更清晰的数据分类视图，特别是当数据具有多层结构时。你可以创建一个新的表格行，然后在代码中动态添加到...
android 双表头表格
04-18
在Android开发中，实现双表头表格是一种常见的需求，尤其在数据展示时，为了清晰地组织和呈现复杂信息，双表头表格可以提供更直观的视图。标题“android 双表头表格”和描述“android 横竖双表头表格”表明我们将...
双表头表格
08-26
在Android开发中，"双表头表格"是一种常见的数据展示方式，它允许用户在单一视图中同时看到两层分类信息，通常是垂直列标题和水平行标题，这为复杂的数据组织提供了清晰的视觉结构。这种设计尤其适用于需要展示多...
双表头固定代码
08-06
overflow-y:scroll\"> <table border=\"1\" bordercolor=\"#0066ff\" cellspacing=\"0\" style=\"width:200px; border-collapse:collapse\"> <tr> <td class=\"fixed\">header1</td> ...
利用JS+CSS实现滚动表格数据展示
06-06
利用CSS动画制作 Html 表格数据滚动显示, 实际自己开发也不难实现。实现的方法很多，下面是本人的一种实现方案，分享给大家。
table表头固定，内容滚动
weixin_44037153的博客
04-14 3941
第一种方法通过overflow属性实现，第二种方法通过position属性实现。
HTML的＜table＞多级表头绘制
0303
03-14 5543
适用于工资单等场景使用
table 表头固定，表体滚动的css方法
Mr_rencp的博客
09-08 1961
table tbody {       display:block;       height:500px;       overflow-y:scroll;   }         table thead, tbody tr {       display:table;       width:100%;       table-layout:fixed;   }    
CSS控制表头不动，表单内容滚动
weixin_42120621的博客
12-20 3562
在工作中做项目时遇到一个需要固定表头的需求，总结思考如下： 要使表单滚动的同时表头固定不动，则要求需要将表头和表单分离开来，可以将这两部分分别放在一个table里面，然后分别控制table的样式。本次不采用这种方法，而是使用table里面自带的thead和tbody属性。 首先创立一个表格 <!DOCTYPE html> <html> <head> &...
实现双向固定表头的表格
lm278858445的专栏
11-28 3760
实现目标 包含横向表头和纵向表头的表格 在横向滚动轴滚动时，横向表头随之滚动，纵向表头固定不变 在纵向滚动轴滚动时，纵向表头随之滚动，横向表头固定不变 效果图 使用资源 angularjs jquery sublime 实现1.基本结构 由于滚动轴会占据一定位置所以在横向表头和纵向表头计算时需要排除掉滚动条的宽动，如果希望使用插件scrollbar.js。 scrollbar.js是由
一步一步写web之初识web（五-数据滚动实现）
week_ed的专栏
04-03 688
趁着空挡赶紧写！ 一、数据滚动 这节想做的效果是在一个框内数据可以循环的向上滚动，只能说功能仿照永夜君王贴吧的捧场动态，样式就不严格一样了。 首先要呈现一个边框出来 #rollText{ position: absolute; width: 400px; border: 1px solid #333333; margin-top: 300px; he
HTML多表头表格
jrrfgj的博客
02-24 1293
HTML多表头表格
关于axure表格，实现横纵向滚动而纵向滚动表头不动的问题
weixin_44606231的博客
12-01 1942
Axure
mongodb实现双表查询
最新发布
08-26
在MongoDB中，可以使用聚合查询和嵌入式文档的方式来实现双表查询。在聚合查询中，可以使用$lookup操作符来进行多表关联查询。$lookup操作符可以在一个集合中查找匹配条件的记录，并将其与另一个集合中的记录关联起来。 首先，你需要使用$lookup操作符指定要关联的集合和关联条件。例如，如果你有两个集合A和B，你可以使用以下代码进行关联查询： ``` db.A.aggregate([ { $lookup: { from: "B", localField: "fieldA", foreignField: "fieldB", as: "result" } } ]) ``` 这个查询将在集合A中的fieldA字段和集合B中的fieldB字段之间进行匹配，并将匹配的记录作为嵌入式文档添加到A的每个记录中的result字段中。 另一种实现双表查询的方式是使用嵌入式文档。在MongoDB中，你可以在一个集合中嵌入另一个集合的记录。例如，如果你有两个集合A和B，你可以将B的记录嵌入到A的记录中。这样，当你查询A集合时，可以同时获取A和B的数据。 这里是一个示例代码： ``` db.A.find().forEach(function(doc) { var b = db.B.findOne({ _id: doc.bId }); doc.b = b; printjson(doc); }); ``` 这段代码将遍历A集合中的每个记录，并使用B集合中与之相关联的记录更新每个A记录中的b字段。 总结起来，MongoDB可以使用聚合查询和嵌入式文档的方式实现双表查询。聚合查询使用$lookup操作符进行关联查询，而嵌入式文档则将一个集合的记录嵌入到另一个集合的记录中。根据具体的需求和数据结构，你可以选择适合的方式来实现双表查询。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *3* [java mongodb 多表关联查询，多条件查询，分页，排序](https://blog.csdn.net/seesun2012/article/details/105165495)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *2* [MongoDB 多表连接查询](https://blog.csdn.net/weixin_39653761/article/details/113432062)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

HolaSecurity

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值