1. <html>
  2.     <head>
  3.     <meta charset="utf-8">
  4.     <title>测试</title>
  5.     <META HTTP-EQUIV="Pragma" CONTENT="no-cache">
  6.     <META HTTP-EQUIV="Cache-Control" CONTENT="no-cache">
  7.     <META HTTP-EQUIV="Expires" CONTENT="0">
  8.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  9.     <meta name="viewport" content="initial-scale=1, maximum-scale=1">
  10.     <link rel="shortcut icon" href="/favicon.ico">
  11.     <meta name="apple-mobile-web-app-capable" content="yes">
  12.     <meta name="apple-mobile-web-app-status-bar-style" content="black">
  13.     <script type="text/javascript" src="../../../js/jquery-2.1.1.min.js"></script>
  14.     <style type="text/css">
  15.  
  16.         * {
  17.             margin: 0;
  18.             padding: 0;
  19.         }
  20.  
  21.         table {
  22.             width: 100%;
  23.             text-align: center;
  24.             border-collapse: collapse;
  25.             border-spacing: 0;
  26.         }
  27.  
  28.         table td {
  29.             word-break: break-all;
  30.             word-wrap: break-word;
  31.         }
  32.  
  33.         .container {
  34.             width:100%;
  35.            display: inline-block;
  36.             padding: 0;
  37.             box-sizing: border-box;
  38.         }
  39.  
  40.         #left-div {
  41.             width: 20%;
  42.             float: left;
  43.         }
  44.  
  45.         #left-div1 {
  46.                 margin-top:60px;
  47.             width: 100%;
  48.         }
  49.  
  50.         #left-div2 {
  51.             width: 100%;
  52.             height: 81%;/*窗口高度*/
  53.             overflow: hidden;
  54.         }
  55.  
  56.         #left-table2 {
  57.             margin-bottom: 4px;
  58.         }
  59.  
  60.         #right-div {
  61.             float: left;
  62.             width: 79.5%;/*窗口宽度*/
  63.         }
  64.  
  65.         #right-div1 {
  66.                 margin-top:60px;
  67.             width: 100%;
  68.             overflow: hidden;
  69.         }
  70.  
  71.         #right-div2 {
  72.             width: 100%;
  73.             height: 81%;/*窗口高度*/
  74.             overflow: auto;
  75.         }
  76.  
  77.         #right-table1 {
  78.             width: 700px;
  79.         }
  80.  
  81.         #right-table2 {
  82.             width: 700px;
  83.             overflow: auto;
  84.         }
  85.  
  86.         th,
  87.         td {
  88.             height: 50px;
  89.             width: 50px;
  90.             line-height: 20px;
  91.             overflow: hidden;
  92.             text-align: center;
  93.         }
  94.  
  95.         th {
  96.             color: #1E304F;
  97.             background-color: #D6D6D6;
  98.         }
  99.  
  100.         td {
  101.             color: #384967;
  102.         }
  103.  
  104.         tr:nth-of-type(odd) {
  105.             background: #bbdefb;
  106.         }
  107.  
  108.         /*可以美化一下滚动条*/
  109.         #right-div2::-webkit-scrollbar {
  110.             /*滚动条整体样式*/
  111.             width: 4px;
  112.             height: 4px;
  113.         }
  114.  
  115.         #right-div2::-webkit-scrollbar-thumb {
  116.             /*滚动条里面小方块*/
  117.             border-radius: 5px;
  118.             box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  119.             background: rgba(0, 0, 0, 0.2);
  120.         }
  121.  
  122.         #right-div2::-webkit-scrollbar-track {
  123.             /*滚动条里面轨道*/
  124.             box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  125.             border-radius: 0;
  126.             background: rgba(0, 0, 0, 0.1);
  127.         }
  128.     </style>
  129.     <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
  130.  
  131.     <script type="text/javascript">
  132.         $(function () {
  133.             //生成表格内容
  134.             let htmlLeft = '';
  135.             let htmlRight = '';
  136.             for (let i = 1; i <= 50; i++) {
  137.                 htmlLeft += '<tr>';
  138.                 htmlLeft += '<td>' + i + '</td>';
  139.                 htmlLeft += '</tr>';
  140.             }
  141.             for (let i = 1; i <= 50; i++) {
  142.                 htmlRight += '<tr>';
  143.                 htmlRight += '<td>A</td>';
  144.                 htmlRight += '<td>100</td>';
  145.                 htmlRight += '<td>500</td>';
  146.                 htmlRight += '<td>1</td>';
  147.                 htmlRight += '<td>A</td>';
  148.                 htmlRight += '<td>100</td>';
  149.                 htmlRight += '<td>500</td>';
  150.                 htmlRight += '</tr>';
  151.             }
  152.             $('#left-table2').html(htmlLeft);
  153.             $('#right-table2').html(htmlRight);
  154.             //滚动
  155.             $('#right-div2').on('scroll', function () {
  156.                 let top = $(this).scrollTop();
  157.                 let left = $(this).scrollLeft();
  158.                 $('#left-div2').scrollTop(top);
  159.                 $('#right-div1').scrollLeft(left);
  160.             })
  161.         });
  162.      </script>
  163. </head>
  164.     <body >
  165.         <div style="position:fixed; left:0px;right:0px; top:0px; -webkit-transform: translateZ(0);">
  166.             <div style="width:100%;height:60px;background:#3DACF3;text-align:center;color:#fff;">
  167.                 <img src="../img/home.png" style="width:40px;height:40px;float:left;margin-top:10px;margin-left:10px;">
  168.                 <div style="font-size:20px;padding-top:15px">测试</div>
  169.                 <div style="height:15px;line-height:15px;font-size:11px;"></div>
  170.                 <div style="clear: both;"></div>
  171.             </div>
  172.         </div>
  173.         <!--数据-->
  174.         <center>
  175.          <div class="container">
  176.         <div id="left-div">
  177.             <div id="left-div1">
  178.                 <table>
  179.                     <tr>
  180.                         <th>sheet1</th>
  181.                     </tr>
  182.                 </table>
  183.             </div>
  184.             <div id="left-div2">
  185.                 <table id="left-table2">
  186.  
  187.                 </table>
  188.             </div>
  189.         </div>
  190.         <div id="right-div">
  191.             <div id="right-div1">
  192.                 <table id="right-table1">
  193.                     <tr>
  194.                         <th>sheet2</th>
  195.                         <th>sheet3</th>
  196.                         <th>sheet4</th>
  197.                         <th>sheet5</th>
  198.                         <th>sheet6</th>
  199.                         <th>sheet7</th>
  200.                         <th>sheet8</th>    
  201.  
  202.                     </tr>
  203.                 </table>
  204.             </div>
  205.             <div id="right-div2">
  206.                 <table id="right-table2">
  207.  
  208.                 </table>
  209.             </div>
  210.         </div>
  211.         <div style="clear:both;"></div>
  212.     </div>
  213.     </center>
  214.     </body>
  215.  
  216. </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. SQL基础语法—insert语句

    1 insert语句 insert语句用于插入数据到表中,其基本语法有以下三种: Syntax: INSERT [LOW_PRIORITY | DELAYED | HIGH_PRIORITY] [IG ...

  2. SpringCloud Netflix Eureka

    Eureka是Netflix开源的服务发现组件,基于REST,SpringCloud将它集成在子项目Spring Cloud Netflix中,从而实现服务的注册.发现. Eureka包含Server ...

  3. 线性递推BM模板

    #include <cstdio> #include<iostream> #include <cstring> #include <cmath> #in ...

  4. linux搭建常用命令

    nohup java -jar floodlight.jar >log.txt     运行jar,日志打印到log.txt中netstat -lnp|grep 88            查看 ...

  5. Spring-Aop编程(三)-AspectJ

    AspectJ 1. 介绍 AspectJ是一个基于Java语言的AOP框架,Spring2.0以后新增了对AspectJ切点表达式支持,@AspectJ 是AspectJ1.5新增功能,通过JDK5 ...

  6. promise封装ajax

    promise的含义(本身不是异步,是封装异步操作的容器,统一异步的标准) promise对象的特点:对象的状态不受外界影响:一旦状态改变,就不会再变,任何时候都可以得到这个结果. function ...

  7. Docker容器里配置计划任务 crontab（DaoCloud+Docker +Laravel5）

    最近项目涉及到一个定时任务的功能,所以去这几天研究了一下 crontab 的使用方法,按照网上的相关教程顺利在自己的电脑上成功开启了这个功能 Laravel + crontab 添加 crontab ...

  8. 红帽RHCE培训-课程3笔记内容2

    9 NFS 9.1 NFS基础 目标 .使用NFS将文件系统连接到客户端,并使用IP 地址控制访问 .使用NFS将文件系统连接到客户端,并使用kerberos 来控制访问 .配置用户名和密码控制访问的 ...

  9. BUUCTF-Web-Warm Up(CVE-2018-12613)

    题目(虽然是Warm up,但一点也不简单): 打开只有图片,源码里面提示了source.php 查看source.php: php代码里又提到了hint,去查看一下: 提示flag在如上图文件名里面 ...

  10. 11，html5为什呢只需要写<!DOCTYPE HTML>

    11,html5为什呢只需要写<!DOCTYPE HTML> html5不基于SGML,不需要对dtd(百科:翻译为文档类型定义,作用是定义xml文档的合法构建模块,成行声明于xml文档中 ...