美文网首页
固定表头和第一列表格的实现

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

作者: 牛老师讲GIS | 来源:发表于2019-06-01 10:08 被阅读0次

概述

在开发的时候，我们有时候会有这样的需求：由于表格的内容比较多，如果横竖都出现滚动条就看不到表头了，这就要求表格的表头和第一列固定，并且出现双向滚动条。本文就就给大家介绍一种通过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

相关文章

  • 表格样式归纳

    固定表头 固定列 可伸缩列 基础表格 基础表格有三种样式：斑马纹表格、带边框表格、没有样式区分的表格 不同密度的表...

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

    概述 在开发的时候，我们有时候会有这样的需求：由于表格的内容比较多，如果横竖都出现滚动条就看不到表头了，这就要求表...

  • element table 固定部分二级表头

    项目用vue+element开发,需求如下:表格为二级表头,一级表头下有多个二级表头,需要固定部分二级表头列在表格...

  • element table 固定列后,固定列表头下沉

    vue项目中使用element组件开发由于表格列比较多,所以把比较重要的一列固定在最右侧,但是固定之后固定列的表头...

  • ant design pro table的使用

    ant design 自带组件 实现功能 表头固定，表格内容滑动 行合并 效果

  • table固定表头和列

    表格固定表头和列 背景 在项目中大多数的表格，都是使用ui库提供的表格，ui库提供的表格为我们封装了很多很实用的功...

  • html+css之table表格

    表格属性 表头标签 表头单元格一般位于表格的第一行或第一列，其文本加粗居中。设置表头非常简单，只需用表头标签 替代...

  • 固定列和表格头的表格实现

    前言 脱离element-ui又借鉴element-ui，实现类似el-table的固定列和表头的效果 1-1固定...

  • [前端][CSS] 纯css实现纵向滚动固定表头与横向内容滚动

    这次要实现的目标是类似这种，纵向滚动时表头固定，横向滚动时，表头跟着滚动 最基础的思路就是表头和内容是用两个表格来...

  • 表格以及流程图的制作

    表格的制作 第一行表头第二行分隔表头和主体部分，对齐方式第三行开始每行代表一个表格行 列与列之间用管道符号|分隔（...

网友评论

      本文标题：固定表头和第一列表格的实现

      本文链接：https://www.haomeiwen.com/subject/lrrotctx.html

      延伸阅读

      深度阅读

      • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

      栏目导航

      热点阅读

      关于我们|服务条款|联系我们|固定表头和第一列表格的实现|投稿指南|网站地图|RSS订阅|排版工具|手机版

      提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

      Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

      备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

      本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

      所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！