<!DOCTYPE html>

<html>

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title></title>

    <meta charset="utf-8" />

    <style type="text/css">

        * {

            margin: 0;

            padding: 0;

        }

        table {

            width: 100%;

            text-align: center;

            border-collapse: collapse;

            border-spacing: 0;

        }

        table td {

            word-break: break-all;

            word-wrap: break-word;

        }

        .container {

            width: 600px;

            height: 500px;

            padding: 0;

            box-sizing: border-box;

        }

        #left-div {

            width: 80px;

            float: left;

        }

        #left-div1 {

            width: 100%;

        }

        #left-div2 {

            width: 100%;

            height: 250px;

            overflow: hidden;

        }

        #left-table2 {

            margin-bottom: 4px;

        }

        #right-div {

            float: left;

            width: 240px;

        }

        #right-div1 {

            width: 100%;

            overflow: hidden;

        }

        #right-div2 {

            width: 100%;

            height: 250px;

            overflow: auto;

        }

        #right-table1 {

            width: 320px;

        }

        #right-table2 {

            width: 320px;

            overflow: auto;

        }

        th,

        td {

            height: 50px;

            width: 80px;

            line-height: 50px;

            overflow: hidden;

            text-align: center;

        }

        th {

            color: #1E304F;

            background-color: #F3F8FF;

        }

        td {

            color: #384967;

        }

        tr:nth-of-type(odd) {

            background: #E7F2FF;

        }

        /*可以美化一下滚动条*/

        #right-div2::-webkit-scrollbar {

            /*滚动条整体样式*/

            width: 4px;

            height: 4px;

        }

        #right-div2::-webkit-scrollbar-thumb {

            /*滚动条里面小方块*/

            border-radius: 5px;

            box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);

            background: rgba(0, 0, 0, 0.2);

        }

        #right-div2::-webkit-scrollbar-track {

            /*滚动条里面轨道*/

            box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);

            border-radius: 0;

            background: rgba(0, 0, 0, 0.1);

        }

    </style>

    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>

    <script type="text/javascript">

        $(function () {

            //生成表格内容

            let htmlLeft = '';

            let htmlRight = '';

            for (let i = 1; i <= 7; i++) {

                htmlLeft += '<tr>';

                htmlLeft += '<td>' + i + '</td>';

                htmlLeft += '</tr>';

            }

            for (let i = 1; i <= 7; i++) {

                htmlRight += '<tr>';

                htmlRight += '<td>A</td>';

                htmlRight += '<td>100</td>';

                htmlRight += '<td>500</td>';

                htmlRight += '<td>1</td>';

                htmlRight += '</tr>';

            }

            $('#left-table2').html(htmlLeft);

            $('#right-table2').html(htmlRight);

            //滚动

            $('#right-div2').on('scroll', function () {

                let top = $(this).scrollTop();

                let left = $(this).scrollLeft();

                $('#left-div2').scrollTop(top);

                $('#right-div1').scrollLeft(left);

            })

        });

    </script>

</head>

<body>

    <div class="container">

        <div id="left-div">

            <div id="left-div1">

                <table>

                    <tr>

                        <th>编号</th>

                    </tr>

                </table>

            </div>

            <div id="left-div2">

                <table id="left-table2"></table>

            </div>

        </div>

        <div id="right-div">

            <div id="right-div1">

                <table id="right-table1">

                    <tr>

                        <th>设备名称</th>

                        <th>设备类型</th>

                        <th>故障类型</th>

                        <th>故障状态</th>

                    </tr>

                </table>

            </div>

            <div id="right-div2">

                <table id="right-table2"></table>

            </div>

        </div>

    </div>

</body>

</html>

　　

转载自 ： https://www.cnblogs.com/xiangsj/p/10425173.html

JS+CSS - table 表格固定表头和第一列、内容可滚动 （转载）的更多相关文章

  1. table 表格固定表头和第一列、内容可滚动

    整理了下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" c ...

  2. layui数据表格固定头部和第一列、colspan合并列

    刚看到原型图的时候,纳尼?不是跟我开玩笑吧,小女子资历尚浅,还真没做过像这样的功能,然后就是各种找度娘,可是都没有找到合适的,很多都是行合并,真的是头疼呀!再纠结是用VUE实现还是用layui实现好, ...

  3. js 实现table表格拖拽和点击表头升降序排序

    js 实现table表格拖拽和点击表头升降序排序,写的比较乱,用的时候可以把其中的一些模块函数提取出来 样式,由于是可拖拽表格,所以样式 table tr th{cursor:move;} js实现 ...

  4. (转)supertable像excel那样固定table的表头和第一列

    <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"/> <title> ...

  5. 第十三篇 JS 操作table表格

    JS 操作table表格 这节课难度可能高一点,因为没有提前解释if判断.for循环.这节课是直接把这两样用上了,老师先简单介绍一下: if,判断语句,判断就很简单了嘛,假如说1=1(1等于1),当然 ...

  6. js创建table表格

    //js创建table表格var tr;var cell;for(var i=0;i<10;i++){ //创建一个tr tr=document.createElement('tr'); doc ...

  7. 【2017-06-29】在登录页面自动返回上次请求页面、Js获取table中的行数与列数

    一.在登录页面自动返回上次请求页面 Request.UrlReferrer比如 if (Request.UrlReferrer != null) { //如果能获取来路地址 Response.Redi ...

  8. 使用bootstrap table 插件固定表头时 表头与表格内容无法对齐

    在使用bootstrap table开发后台管理系统,表格利用bootstrap-table插件来实现,使用bootstrap-table过程中,会出现表头错位的情况 表头对不齐效果: 解决的方法: ...

  9. jQuery制作多表格固定表头、切换表头的特效

    做了好几天的固定表头特效,总算是搞定了.先说明一下基本功能:我们在一个网页上浏览很多份表格数据的时候,肯定会碰到很多分不清表头,也分不清表 格是哪个的情况,这个时候我们就希望能有一种功能,就是我们再下 ...

随机推荐

  1. request和response对象如何解决中文乱码问题？

    出现中文乱码的问题,一般的原因编码和和解码不一致造成的. /* 乱码:编码和解码不一致导致的 GET:你好 POST:?????? tomcat版本:8.5及以上版本 GET请求方式,request对 ...

  2. redis 之redis发布订阅

    Redis 通过 PUBLISH . SUBSCRIBE 等命令实现了订阅与发布模式. 一个Publisher,多个Subscriber模型 如下图所示,可以作为消息队列或者消息通道 主要应用: 一个 ...

  3. 设计模式课程 设计模式精讲 21-2 观察者模式coding

    1 代码演练 1.1 代码演练1(一对一观察) 1.2 代码演练2(一对多观察) 1.3 代码演练3(多对多观察) 1 代码演练 1.1 代码演练1(一对一观察) 需求: 木木网课程系统,教师后台提醒 ...

  4. mybatis关键查询

    一.一对一关联 1.1.提出需求 根据班级id查询班级信息(带老师的信息) 1.2.创建表和数据 创建一张教师表和班级表,这里我们假设一个老师只负责教一个班,那么老师和班级之间的关系就是一种一对一的关 ...

  5. Mybatis框架模糊查询

    一.ISmbmsUserDao层 //根据姓名模糊查询 public List<Smbms> getUser(); //多条件查询 public List<Smbms> get ...

  6. java学习-抽象类和接口-抽象类初体验

    今天在老师的带领下学习了抽象类(abstract)和接口(interface),总结一下今天所学的知识. 抽象类是在学习到接口时之前讲解,作为学习接口的铺垫. 下面是我今天写的例题. 一个Shape( ...

  7. 如何让图片在div里左右居中，上下居中

    如何让图片在div里左右居中,上下居中 转载▼   1.要想让图片左右对齐,我们可以在div里写入"style:text-align:center;"代码来实现. 2.要想使图片居 ...

  8. 40和为S的两个数字

    题目描述 输入一个递增排序的数组和一个数字S,在数组中查找两个数,是的他们的和正好是S,如果有多对数字的和等于S,输出两个数的乘积最小的. 输出描述: 对应每个测试案例,输出两个数,小的先输出. 思路 ...

  9. 《N诺机试指南》（一）数组妙用

    题目A: 大家思路有可能是这样: 将输入数据全部存储到一个数组里,然后可以冒泡排序一波,从小到大排序 那么怎么找到重复次数呢:我是这样想的,新定义数组b,原数组a,首先b[0] = a[0],定义指针 ...

  10. Python 矩阵相关

    Python 中矩阵运算主要使用numpy库.NumPy的主要对象是同种元素的多维数组.这是一个所有的元素都是一种类型.通过一个正整数索引的元素表格(通常是元素是数字).因此对于随机查找来说,比pyt ...