<html>

    <head>

    <meta charset="utf-8">

    <title>测试</title>

    <META HTTP-EQUIV="Pragma" CONTENT="no-cache">

    <META HTTP-EQUIV="Cache-Control" CONTENT="no-cache">

    <META HTTP-EQUIV="Expires" CONTENT="0">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="initial-scale=1, maximum-scale=1">

    <link rel="shortcut icon" href="/favicon.ico">

    <meta name="apple-mobile-web-app-capable" content="yes">

    <meta name="apple-mobile-web-app-status-bar-style" content="black">

    <script type="text/javascript" src="../../../js/jquery-2.1.1.min.js"></script>

    <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:100%;

           display: inline-block;

            padding: 0;

            box-sizing: border-box;

        }

        #left-div {

            width: 20%;

            float: left;

        }

        #left-div1 {

                margin-top:60px;

            width: 100%;

        }

        #left-div2 {

            width: 100%;

            height: 81%;/*窗口高度*/

            overflow: hidden;

        }

        #left-table2 {

            margin-bottom: 4px;

        }

        #right-div {

            float: left;

            width: 79.5%;/*窗口宽度*/

        }

        #right-div1 {

                margin-top:60px;

            width: 100%;

            overflow: hidden;

        }

        #right-div2 {

            width: 100%;

            height: 81%;/*窗口高度*/

            overflow: auto;

        }

        #right-table1 {

            width: 700px;

        }

        #right-table2 {

            width: 700px;

            overflow: auto;

        }

        th,

        td {

            height: 50px;

            width: 50px;

            line-height: 20px;

            overflow: hidden;

            text-align: center;

        }

        th {

            color: #1E304F;

            background-color: #D6D6D6;

        }

        td {

            color: #384967;

        }

        tr:nth-of-type(odd) {

            background: #bbdefb;

        }

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

        #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 <= 50; i++) {

                htmlLeft += '<tr>';

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

                htmlLeft += '</tr>';

            }

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

                htmlRight += '<tr>';

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

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

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

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

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

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

                htmlRight += '<td>500</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 style="position:fixed; left:0px;right:0px; top:0px; -webkit-transform: translateZ(0);">

            <div style="width:100%;height:60px;background:#3DACF3;text-align:center;color:#fff;">

                <img src="../img/home.png" style="width:40px;height:40px;float:left;margin-top:10px;margin-left:10px;">

                <div style="font-size:20px;padding-top:15px">测试</div>

                <div style="height:15px;line-height:15px;font-size:11px;"></div>

                <div style="clear: both;"></div>

            </div>

        </div>

        <!--数据-->

        <center>

         <div class="container">

        <div id="left-div">

            <div id="left-div1">

                <table>

                    <tr>

                        <th>sheet1</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>sheet2</th>

                        <th>sheet3</th>

                        <th>sheet4</th>

                        <th>sheet5</th>

                        <th>sheet6</th>

                        <th>sheet7</th>

                        <th>sheet8</th>    

                    </tr>

                </table>

            </div>

            <div id="right-div2">

                <table id="right-table2">

                </table>

            </div>

        </div>

        <div style="clear:both;"></div>

    </div>

    </center>

    </body>

</html>

table 实现向下滑动首行冻结，向右滑动左列冻结的更多相关文章

  1. js div及table首行顶部吸附示例

    js div顶部吸附示例,例如这样: 以下为DIV顶部吸附示例:(此示例来自于网络,在此记录与分享!感谢原作者!) 示例1:兼容IE6 <div style="height:300px ...

  2. excel如何冻结首行或首列及首行首列同时冻结

    冻结首行方法: 首先选择首行,在菜单栏选择视图菜单,再选择冻结窗格下拉三角里的冻结首行即可. 效果如下:拖动垂直滚动条 冻结首列方法: 首先选择首列,在菜单栏选择视图菜单,再选择冻结窗格下拉三角里的冻 ...

  3. UILabletext去掉乱码 控制颜色 行高 自定义大小 。显示不同的字体颜色、字体大小、行间距、首行缩进、下划线等属性（NSMutableAttributedString）

    text去掉乱码 设置不同颜色 行高 自定义大小 #import <Foundation/Foundation.h> @interface TextsForRow : NSObject @ ...

  4. Python程序的首行

    >问题 >>在一些python程序中的首行往往能够看见下面这两行语句中的一句 >>>#!/usr/bin/Python >>>#!/usr/bin ...

  5. jQuery 移动端ajax请求列表数据，实现点击翻页效果（还有手势往下滑动翻页）。

    1 首先是html部分 <div class="content"> <div class="list"></div>  // ...

  6. [整理][LaTex]小技巧之——首行缩进

    0. 简介 在LaTex编辑时,有时会遇到这样一个有关于首行缩进的问题.在汉语环境的编辑下,习惯上每段会进行一个两个字的缩进.但是在默认编辑模式下,一个章节下的首段是没有首行缩进的,本文的目的主要是解 ...

  7. 从零开始学ios开发（十三）：Table Views（下）Grouped and Indexed Sections

    在前面2篇关于Table View的介绍中,我们使用的Style都是Plain,没有分组,没有index,这次学习的Table View和iphone中的通讯录很像,有一个个以字符为分割的组,最右边有 ...

  8. CSS中字距，词距，首行缩进，字体大小，排版相关问题的探讨

    先说明下,这是在谷歌浏览器下字体显示等问题做个研究,火狐下有点差异,不过火狐占有率低,而且显示的没有谷歌那么合理,不管它先.IE卡的要死,半死不活,也懒得深入研究这些细节,字体排版上不是强迫症,差别也 ...

  9. Saiku设置展示table数据不隐藏空的行数据信息（二十六）

    Saiku设置展示table数据不隐藏空的行数据信息 saiku有个 非空的字段 按钮,点击这个后,会自动的把空的行数据信息给隐藏掉,这里我们来设置一下让其行数据不隐藏,为空的就为空. 主要更改两个文 ...

随机推荐

  1. EnumSet

    这个概念是在 Effective Java中了解到的, 可以通过EnumSet来代替位域这种方式表达.并不是很常见的概念, 因此记录下.如果在这之前恰好了解过 bitmap这种数据结构就更好了.不了解 ...

  2. Eclipse使用段注释格式化代码后混乱情况解决

    今天在Eclipse写代码用到段注释代码块注释一个方法,习惯使用格式化代码,结果一看格式化后的代码就乱了.就像下面那样. 觉得太乱了,而且不好对比检查.如果取消注释中间的**还保存了的,好纠结.于是就 ...

  3. 部署DVWA时的一些问题和解决办法(一)

    第一个有可能遇到的问题 0x4 配置PHP 配置PHP,GD支持 系统从2017更新到2018多个php版本共存问题解决,phpinfo 显示7.0 ,而php -v 显示7.2问题 apt-get ...

  4. 从游击队到正规军(三)：基于Go的马蜂窝旅游网分布式IM系统技术实践

    本文由马蜂窝技术团队电商交易基础平台研发工程师"Anti Walker"原创分享. 一.引言 即时通讯(IM)功能对于电商平台来说非常重要,特别是旅游电商. 从商品复杂性来看,一个 ...

  5. python 读写函数

    1.open 使用open打开文件后一定要记得调用文件对象的close()方法.比如可以用try/finally语句来确保最后能关闭文件. file_object = open('thefile.tx ...

  6. 连通数[JSOI2010]-洛谷T4306

    咕咕咕 tarjan+拓排应该是正解吧 然而我上去就打了个tarjan和dijkstra (由于我抄题解抄多了,代码能力极差,于是我就gg了) 题解中有大佬直接用dfs过了8个点,再吸口氧就AC了 ( ...

  7. Ubuntu 16 安装Nginx+Php+Mysql

    嗯哼,结束外派,我胡汉三又回来了,回来第一件事,就是重新装服务器,搭环境,以前用的apache,最近改了nginx,来吧,从头开始 因为以前一直用apache,这次换一个nginx试试. 1.更新系统 ...

  8. txt文件太大打不开怎么办

    #开始 最近在调试代码的时候,生成了一个400MB的日志文件 找了很多文本编辑器,都表示太大了打不开 QAQ #解决方案 百度下载 “txt杀手” 用这个软件把文本文件拆分成小份就可以打开了 输入如图 ...

  9. Spring基础篇——通过Java注解和XML配置装配bean（转载）

      作者:陈本布衣 出处:http://www.cnblogs.com/chenbenbuyi 本文版权归作者和博客园共有,欢迎转载分享,但必须保留此段声明,且在文章页面明显位置给出原文链接,否则保留 ...

  10. 写作环境搭建(git+github+markdown+jekyll)

    转载自: https://site.douban.com/196781/widget/notes/12161495/note/264946576/ 2013-03-04 19:33:10   --- ...