整理了下：

<!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>

table 表格固定表头和第一列、内容可滚动的更多相关文章

  1. JS+CSS - table 表格固定表头和第一列、内容可滚动 （转载）

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

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

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

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

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

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

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

  5. 解决react使用antd table组件固定表头后，表头和表体列不对齐以及配置fixed固定左右侧后行高度不对齐

    一.固定表头后表体列和表头不对齐 此问题可能在antd3.24.0版本之前都存在,反正3.16.2版本是存在这个问题的,如果是3.24.0之前的版本估计只能通过修改css样式解决. 按照官网说的: 1 ...

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

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

  7. ant design 的Table组件固定表头时不对齐

    现在有一个表格,里面的列数是不固定的(可以重复写入数据),且列数行数都可能很多,就带来一个问题: 必须要固定表头,但是antd 的表格组件设置了固定表格 scroll={{x:1000,y:300}} ...

  8. table表格合并列中相同的内容

    方法一: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF- ...

  9. 纯css实现table表格固定列和表头,中间横向滚动的思路-附案例

    最近做的后台管理系统要处理大量的表格 原项目是采用的for循环加拼接字符串的方式实现;导致js代码一大堆;各种单引号和双引号的嵌套;让人头疼;遂引入vue.js;用v-for做模板渲染;工作量顿时减轻 ...

随机推荐

  1. 我的第一个python web开发框架（22）——一个安全小事故

    在周末的一个早上,小白还在做着美梦,就收到了小美的连环追魂call,电话一直响个不停. 小白打着哈欠拿起电话:早上好美女. 小美:出事了出事了,我们公司网站一早访问是一片空白,什么内容都没有了,你赶急 ...

  2. Luogu P5296 [北京省选集训2019]生成树计数

    Luogu P5296 [北京省选集训2019]生成树计数 题目链接 题目大意:给定每条边的边权.一颗生成树的权值为边权和的\(k\)次方.求出所有生成树的权值和. 我们列出答案的式子: 设\(E\) ...

  3. .NET平台下，初步认识AutoMapper

    初步认识AutoMapper AutoMapper 初步认识AutoMapper 前言 手动映射 使用AutoMapper 创建映射 Conventions 映射到一个已存在的实例对象   前言 通常 ...

  4. Jetson TX2（2）ubutu1604--安装opencv3.4.0

    1安装OpenCV3.4.0+contrib 1 在终端中敲入以下两句sudo rm /var/cache/apt/archives/locksudo rm /var/lib/dpkg/lock su ...

  5. Python排序算法——冒泡排序

    有趣的事,Python永远不会缺席! 如需转发,请注明出处:小婷儿的python https://www.cnblogs.com/xxtalhr/p/10786904.html 一.冒泡排序(Bubb ...

  6. kubernetes1.14.0部署

    2019/4/6/使用kubeadm安装部署kubernetes集群: 前提:1.各节点时间同步:2.各节点主机名称解析:dns OR hosts:3.各节点iptables及firewalld服务被 ...

  7. Linux内存管理 (12)反向映射RMAP

    专题:Linux内存管理专题 关键词:RMAP.VMA.AV.AVC. 所谓反向映射是相对于从虚拟地址到物理地址的映射,反向映射是从物理页面到虚拟地址空间VMA的反向映射. RMAP能否实现的基础是通 ...

  8. js 移除数组元素

    //移除数组元素 Array.prototype.remove = function(val) { var index = this.indexOfArr(val); if (index > - ...

  9. PS快速调出天蓝色清新外景

    原片: 一.调整光比 曝光 黑白灰. 二.调整色温(新手可用白平衡工具.左上角第3个)调整饱和度(自然饱和度和蓝原色) 三.互补色的运用(高光偏黄 加的蓝色 暗部发蓝青色 加的橙黄色) 四.调整好照片 ...

  10. java 中的基本数据类型

    1,  变量 Java是强类型语言, 对于每一种数据都定义了类型,基本数据类型分为数值型,字符型,布尔型.数值型又分为了整型和浮点型. 整型又分为byte, int, short long. 浮点型又 ...