固定表头和第一列表格的实现

概述

在开发的时候,我们有时候会有这样的需求:由于表格的内容比较多,如果横竖都出现滚动条就看不到表头了,这就要求表格的表头和第一列固定,并且出现双向滚动条。本文就就给大家介绍一种通过css和两行js简单实现。

效果

实现后效果

实现思路

1.区域划分

如下图,将整个表格分为四个区域:1、左上区域需要单独出来,因为此区域不参与滚动;2、上部表头,需要固定在顶部并且参与横向滚动;3、左边表头,需要滚动并且参与竖向滚动;4、表格主区域,会有横竖向的滚动,控制顶部和左边的表头。


区域划分
2.关键点

table的th或者td里面套一个div并设置宽度,目的是为了撑开table的表格,因为单独给th或者td是不起作用的。

实现代码

@charset "utf-8";

.container {
  font-size: 12px;
  width: 600px;
  overflow: hidden;
  .table {
    width: 100%;
    border-top: 1px solid #ddd;
    border-left: 1px solid #ddd;
    th,
    td {
      border-bottom: 1px solid #ddd;
      border-right: 1px solid #ddd;
      div {
        height: 20px;
        line-height: 20px;
        width: 60px;
        white-space: nowrap;
      }
    }
  }
  .table-title,
  .table-content {
    float: left;
    /*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
    &::-webkit-scrollbar {
      width: 6px;
      height: 6px;
      background-color: #F9F9F9;
    }
    /*定义滚动条轨道 内阴影+圆角*/
    &::-webkit-scrollbar-track {
      -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
      border-radius: 10px;
      background-color: #F5F5F5;
    }
    /*定义滑块 内阴影+圆角*/
    &::-webkit-scrollbar-thumb {
      border-radius: 3px;
      -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
      background-color: #999;
    }
  }
  .table-title {
    width: 60px;
  }
  .top-title {
    width: calc(100% - 66px);
    overflow: hidden;
  }
  .left-title {
    max-height: 200px;
    overflow: hidden;
  }
  .table-content {
    position: relative;
    width: calc(100% - 60px);
    max-height: 206px;
    overflow: auto;
  }
}
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <!--jquery-->
        <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
        <!--easyui-->
        <link rel="stylesheet" href="style.css" />
    </head>
    <body>
        <div class="container">
            <div>
                <div class="table-title">
                    <table class="table" cellpadding="0" cellspacing="0">
                        <tr><th><div>商品名称</div></th></tr>
                    </table>
                </div>
                <div class="table-content top-title" id="topTitle">
                    <table class="table" cellpadding="0" cellspacing="0">
                        <tr>
                            <th><div>属性1</div></th>
                            <th><div>属性2</div></th>
                            <th><div>属性3</div></th>
                            <th><div>属性4</div></th>
                            <th><div>属性5</div></th>
                            <th><div>属性6</div></th>
                            <th><div>属性7</div></th>
                            <th><div>属性8</div></th>
                            <th><div>属性9</div></th>
                            <th><div>属性10</div></th>
                            <th><div>属性11</div></th>
                            <th><div>属性12</div></th>
                            <th><div>属性13</div></th>
                            <th><div>属性14</div></th>
                            <th><div>属性15</div></th>
                            <th><div>属性16</div></th>
                            <th><div>属性17</div></th>
                            <th><div>属性18</div></th>
                            <th><div>属性19</div></th>
                            <th><div>属性20</div></th>
                        </tr>
                    </table>
                </div>
            </div>
            
            <div>
                <div class="table-title left-title" id="leftTitle">
                    <table class="table" cellpadding="0" cellspacing="0">
                        <tr><th><div>商品1</div></th></tr>
                        <tr><th><div>商品2</div></th></tr>
                        <tr><th><div>商品3</div></th></tr>
                        <tr><th><div>商品4</div></th></tr>
                        <tr><th><div>商品5</div></th></tr>
                        <tr><th><div>商品6</div></th></tr>
                        <tr><th><div>商品7</div></th></tr>
                        <tr><th><div>商品8</div></th></tr>
                        <tr><th><div>商品9</div></th></tr>
                        <tr><th><div>商品10</div></th></tr>
                        <tr><th><div>商品11</div></th></tr>
                        <tr><th><div>商品12</div></th></tr>
                        <tr><th><div>商品13</div></th></tr>
                        <tr><th><div>商品14</div></th></tr>
                        <tr><th><div>商品15</div></th></tr>
                    </table>
                </div>
                <div class="table-content" id="content">
                    <table class="table" cellpadding="0" cellspacing="0">
                        <tr>
                            <td><div>属性</div></td>
                            <td><div>属性</div></td>
                            <td><div>属性</div></td>
                            <td><div>属性</div></td>
                            <td><div>属性</div></td>
                            <td><div>属性</div></td>
                            <td><div>属性</div></td>
                            <td><div>属性</div></td>
                            <td><div>属性</div></td>
                            <td><div>属性</div></td>
                            <td><div>属性</div></td>
                            <td><div>属性</div></td>
                            <td><div>属性</div></td>
                            <td><div>属性</div></td>
                            <td><div>属性</div></td>
                            <td><div>属性</div></td>
                            <td><div>属性</div></td>
                            <td><div>属性</div></td>
                            <td><div>属性</div></td>
                            <td><div>属性</div></td>
                        </tr>
                        <tr>
                            <td><div>属性</div></td>
                            <td><div>属性</div></td>
                            <td><div>属性</div></td>
                            <td><div>属性</div></td>
                            <td><div>属性</div></td>
                            <td><div>属性</div></td>
                            <td><div>属性</div></td>
                            <td><div>属性</div></td>
                            <td><div>属性</div></td>
                            <td><div>属性</div></td>
                            <td><div>属性</div></td>
                            <td><div>属性</div></td>
                            <td><div>属性</div></td>
                            <td><div>属性</div></td>
                            <td><div>属性</div></td>
                            <td><div>属性</div></td>
                            <td><div>属性</div></td>
                            <td><div>属性</div></td>
                            <td><div>属性</div></td>
                            <td><div>属性</div></td>
                        </tr>
                        <tr>
                            <td><div>属性</div></td>
                            <td><div>属性</div></td>
                            <td><div>属性</div></td>
                            <td><div>属性</div></td>
                            <td><div>属性</div></td>
                            <td><div>属性</div></td>
                            <td><div>属性</div></td>
                            <td><div>属性</div></td>
                            <td><div>属性</div></td>
                            <td><div>属性</div></td>
                            <td><div>属性</div></td>
                            <td><div>属性</div></td>
                            <td><div>属性</div></td>
                            <td><div>属性</div></td>
                            <td><div>属性</div></td>
                            <td><div>属性</div></td>
                            <td><div>属性</div></td>
                            <td><div>属性</div></td>
                            <td><div>属性</div></td>
                            <td><div>属性</div></td>
                        </tr>
                        <tr>
                            <td><div>属性</div></td>
                            <td><div>属性</div></td>
                            <td><div>属性</div></td>
                            <td><div>属性</div></td>
                            <td><div>属性</div></td>
                            <td><div>属性</div></td>
                            <td><div>属性</div></td>
                            <td><div>属性</div></td>
                            <td><div>属性</div></td>
                            <td><div>属性</div></td>
                            <td><div>属性</div></td>
                            <td><div>属性</div></td>
                            <td><div>属性</div></td>
                            <td><div>属性</div></td>
                            <td><div>属性</div></td>
                            <td><div>属性</div></td>
                            <td><div>属性</div></td>
                            <td><div>属性</div></td>
                            <td><div>属性</div></td>
                            <td><div>属性</div></td>
                        </tr>
                        <tr>
                            <td><div>属性</div></td>
                            <td><div>属性</div></td>
                            <td><div>属性</div></td>
                            <td><div>属性</div></td>
                            <td><div>属性</div></td>
                            <td><div>属性</div></td>
                            <td><div>属性</div></td>
                            <td><div>属性</div></td>
                            <td><div>属性</div></td>
                            <td><div>属性</div></td>
                            <td><div>属性</div></td>
                            <td><div>属性</div></td>
                            <td><div>属性</div></td>
                            <td><div>属性</div></td>
                            <td><div>属性</div></td>
                            <td><div>属性</div></td>
                            <td><div>属性</div></td>
                            <td><div>属性</div></td>
                            <td><div>属性</div></td>
                            <td><div>属性</div></td>
                        </tr>
                        <tr>
                            <td><div>属性</div></td>
                            <td><div>属性</div></td>
                            <td><div>属性</div></td>
                            <td><div>属性</div></td>
                            <td><div>属性</div></td>
                            <td><div>属性</div></td>
                            <td><div>属性</div></td>
                            <td><div>属性</div></td>
                            <td><div>属性</div></td>
                            <td><div>属性</div></td>
                            <td><div>属性</div></td>
                            <td><div>属性</div></td>
                            <td><div>属性</div></td>
                            <td><div>属性</div></td>
                            <td><div>属性</div></td>
                            <td><div>属性</div></td>
                            <td><div>属性</div></td>
                            <td><div>属性</div></td>
                            <td><div>属性</div></td>
                            <td><div>属性</div></td>
                        </tr>
                        <tr>
                            <td><div>属性</div></td>
                            <td><div>属性</div></td>
                            <td><div>属性</div></td>
                            <td><div>属性</div></td>
                            <td><div>属性</div></td>
                            <td><div>属性</div></td>
                            <td><div>属性</div></td>
                            <td><div>属性</div></td>
                            <td><div>属性</div></td>
                            <td><div>属性</div></td>
                            <td><div>属性</div></td>
                            <td><div>属性</div></td>
                            <td><div>属性</div></td>
                            <td><div>属性</div></td>
                            <td><div>属性</div></td>
                            <td><div>属性</div></td>
                            <td><div>属性</div></td>
                            <td><div>属性</div></td>
                            <td><div>属性</div></td>
                            <td><div>属性</div></td>
                        </tr>
                        <tr>
                            <td><div>属性</div></td>
                            <td><div>属性</div></td>
                            <td><div>属性</div></td>
                            <td><div>属性</div></td>
                            <td><div>属性</div></td>
                            <td><div>属性</div></td>
                            <td><div>属性</div></td>
                            <td><div>属性</div></td>
                            <td><div>属性</div></td>
                            <td><div>属性</div></td>
                            <td><div>属性</div></td>
                            <td><div>属性</div></td>
                            <td><div>属性</div></td>
                            <td><div>属性</div></td>
                            <td><div>属性</div></td>
                            <td><div>属性</div></td>
                            <td><div>属性</div></td>
                            <td><div>属性</div></td>
                            <td><div>属性</div></td>
                            <td><div>属性</div></td>
                        </tr>
                        <tr>
                            <td><div>属性</div></td>
                            <td><div>属性</div></td>
                            <td><div>属性</div></td>
                            <td><div>属性</div></td>
                            <td><div>属性</div></td>
                            <td><div>属性</div></td>
                            <td><div>属性</div></td>
                            <td><div>属性</div></td>
                            <td><div>属性</div></td>
                            <td><div>属性</div></td>
                            <td><div>属性</div></td>
                            <td><div>属性</div></td>
                            <td><div>属性</div></td>
                            <td><div>属性</div></td>
                            <td><div>属性</div></td>
                            <td><div>属性</div></td>
                            <td><div>属性</div></td>
                            <td><div>属性</div></td>
                            <td><div>属性</div></td>
                            <td><div>属性</div></td>
                        </tr>
                        <tr>
                            <td><div>属性</div></td>
                            <td><div>属性</div></td>
                            <td><div>属性</div></td>
                            <td><div>属性</div></td>
                            <td><div>属性</div></td>
                            <td><div>属性</div></td>
                            <td><div>属性</div></td>
                            <td><div>属性</div></td>
                            <td><div>属性</div></td>
                            <td><div>属性</div></td>
                            <td><div>属性</div></td>
                            <td><div>属性</div></td>
                            <td><div>属性</div></td>
                            <td><div>属性</div></td>
                            <td><div>属性</div></td>
                            <td><div>属性</div></td>
                            <td><div>属性</div></td>
                            <td><div>属性</div></td>
                            <td><div>属性</div></td>
                            <td><div>属性</div></td>
                        </tr>
                        <tr>
                            <td><div>属性</div></td>
                            <td><div>属性</div></td>
                            <td><div>属性</div></td>
                            <td><div>属性</div></td>
                            <td><div>属性</div></td>
                            <td><div>属性</div></td>
                            <td><div>属性</div></td>
                            <td><div>属性</div></td>
                            <td><div>属性</div></td>
                            <td><div>属性</div></td>
                            <td><div>属性</div></td>
                            <td><div>属性</div></td>
                            <td><div>属性</div></td>
                            <td><div>属性</div></td>
                            <td><div>属性</div></td>
                            <td><div>属性</div></td>
                            <td><div>属性</div></td>
                            <td><div>属性</div></td>
                            <td><div>属性</div></td>
                            <td><div>属性</div></td>
                        </tr>
                        <tr>
                            <td><div>属性</div></td>
                            <td><div>属性</div></td>
                            <td><div>属性</div></td>
                            <td><div>属性</div></td>
                            <td><div>属性</div></td>
                            <td><div>属性</div></td>
                            <td><div>属性</div></td>
                            <td><div>属性</div></td>
                            <td><div>属性</div></td>
                            <td><div>属性</div></td>
                            <td><div>属性</div></td>
                            <td><div>属性</div></td>
                            <td><div>属性</div></td>
                            <td><div>属性</div></td>
                            <td><div>属性</div></td>
                            <td><div>属性</div></td>
                            <td><div>属性</div></td>
                            <td><div>属性</div></td>
                            <td><div>属性</div></td>
                            <td><div>属性</div></td>
                        </tr>
                        <tr>
                            <td><div>属性</div></td>
                            <td><div>属性</div></td>
                            <td><div>属性</div></td>
                            <td><div>属性</div></td>
                            <td><div>属性</div></td>
                            <td><div>属性</div></td>
                            <td><div>属性</div></td>
                            <td><div>属性</div></td>
                            <td><div>属性</div></td>
                            <td><div>属性</div></td>
                            <td><div>属性</div></td>
                            <td><div>属性</div></td>
                            <td><div>属性</div></td>
                            <td><div>属性</div></td>
                            <td><div>属性</div></td>
                            <td><div>属性</div></td>
                            <td><div>属性</div></td>
                            <td><div>属性</div></td>
                            <td><div>属性</div></td>
                            <td><div>属性</div></td>
                        </tr>
                        <tr>
                            <td><div>属性</div></td>
                            <td><div>属性</div></td>
                            <td><div>属性</div></td>
                            <td><div>属性</div></td>
                            <td><div>属性</div></td>
                            <td><div>属性</div></td>
                            <td><div>属性</div></td>
                            <td><div>属性</div></td>
                            <td><div>属性</div></td>
                            <td><div>属性</div></td>
                            <td><div>属性</div></td>
                            <td><div>属性</div></td>
                            <td><div>属性</div></td>
                            <td><div>属性</div></td>
                            <td><div>属性</div></td>
                            <td><div>属性</div></td>
                            <td><div>属性</div></td>
                            <td><div>属性</div></td>
                            <td><div>属性</div></td>
                            <td><div>属性</div></td>
                        </tr>
                        <tr>
                            <td><div>属性</div></td>
                            <td><div>属性</div></td>
                            <td><div>属性</div></td>
                            <td><div>属性</div></td>
                            <td><div>属性</div></td>
                            <td><div>属性</div></td>
                            <td><div>属性</div></td>
                            <td><div>属性</div></td>
                            <td><div>属性</div></td>
                            <td><div>属性</div></td>
                            <td><div>属性</div></td>
                            <td><div>属性</div></td>
                            <td><div>属性</div></td>
                            <td><div>属性</div></td>
                            <td><div>属性</div></td>
                            <td><div>属性</div></td>
                            <td><div>属性</div></td>
                            <td><div>属性</div></td>
                            <td><div>属性</div></td>
                            <td><div>属性</div></td>
                        </tr>
                    </table>
                </div>
            </div>
        </div>
        <script>
            $("#content").scroll(function() {
                $("#topTitle").scrollLeft($("#content").scrollLeft());
                $("#leftTitle").scrollTop($("#content").scrollTop());
            });
        </script>
    </body>
</html>

技术博客
CSDN:http://blog.csdn.NET/gisshixisheng
在线教程
https://edu.csdn.net/course/detail/799
https://edu.csdn.net/course/detail/7471
联系方式

类型 内容
qq 1004740957
公众号 lzugis15
e-mail niujp08@qq.com
webgis群 452117357
Android群 337469080
GIS数据可视化群 458292378
LZUGIS
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 216,240评论 6 498
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,328评论 3 392
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 162,182评论 0 353
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,121评论 1 292
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,135评论 6 388
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,093评论 1 295
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,013评论 3 417
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,854评论 0 273
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,295评论 1 310
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,513评论 2 332
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,678评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,398评论 5 343
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,989评论 3 325
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,636评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,801评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,657评论 2 368
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,558评论 2 352

推荐阅读更多精彩内容