table 实现向下滑动首行冻结，向右滑动左列冻结
<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 实现向下滑动首行冻结，向右滑动左列冻结的更多相关文章
- js div及table首行顶部吸附示例
js div顶部吸附示例,例如这样: 以下为DIV顶部吸附示例:(此示例来自于网络,在此记录与分享!感谢原作者!) 示例1:兼容IE6 <div style="height:300px ...
- excel如何冻结首行或首列及首行首列同时冻结
冻结首行方法: 首先选择首行,在菜单栏选择视图菜单,再选择冻结窗格下拉三角里的冻结首行即可. 效果如下:拖动垂直滚动条 冻结首列方法: 首先选择首列,在菜单栏选择视图菜单,再选择冻结窗格下拉三角里的冻 ...
- UILabletext去掉乱码 控制颜色 行高 自定义大小 。显示不同的字体颜色、字体大小、行间距、首行缩进、下划线等属性（NSMutableAttributedString）
text去掉乱码 设置不同颜色 行高 自定义大小 #import <Foundation/Foundation.h> @interface TextsForRow : NSObject @ ...
- Python程序的首行
>问题 >>在一些python程序中的首行往往能够看见下面这两行语句中的一句 >>>#!/usr/bin/Python >>>#!/usr/bin ...
- jQuery 移动端ajax请求列表数据，实现点击翻页效果（还有手势往下滑动翻页）。
1 首先是html部分 <div class="content"> <div class="list"></div> // ...
- [整理][LaTex]小技巧之——首行缩进
0. 简介 在LaTex编辑时,有时会遇到这样一个有关于首行缩进的问题.在汉语环境的编辑下,习惯上每段会进行一个两个字的缩进.但是在默认编辑模式下,一个章节下的首段是没有首行缩进的,本文的目的主要是解 ...
- 从零开始学ios开发（十三）：Table Views（下）Grouped and Indexed Sections
在前面2篇关于Table View的介绍中,我们使用的Style都是Plain,没有分组,没有index,这次学习的Table View和iphone中的通讯录很像,有一个个以字符为分割的组,最右边有 ...
- CSS中字距，词距，首行缩进，字体大小，排版相关问题的探讨
先说明下,这是在谷歌浏览器下字体显示等问题做个研究,火狐下有点差异,不过火狐占有率低,而且显示的没有谷歌那么合理,不管它先.IE卡的要死,半死不活,也懒得深入研究这些细节,字体排版上不是强迫症,差别也 ...
- Saiku设置展示table数据不隐藏空的行数据信息（二十六）
Saiku设置展示table数据不隐藏空的行数据信息 saiku有个 非空的字段 按钮,点击这个后,会自动的把空的行数据信息给隐藏掉,这里我们来设置一下让其行数据不隐藏,为空的就为空. 主要更改两个文 ...
随机推荐
- execute command denied to user 'maintain'@'%' for routine
GRANT ALL PRIVILEGES ON *.* TO 'maintain'@'%' ; FLUSH PRIVILEGES;
- Flask 教程 第十七章：Linux上的部署
本文翻译自The Flask Mega-Tutorial Part XVII: Deployment on Linux 这是Flask Mega-Tutorial系列的第十七部分,我将把Microbl ...
- Kubernetes 与 Helm：使用同一个 Chart 部署多个应用
k8s 集群搭建好了,准备将 docker swarm 上的应用都迁移到 k8s 上,但需要一个一个应用写 yaml 配置文件,不仅要编写 deployment.yaml 还要编写 service.y ...
- 转：为什么说Java中只有值传递
原文:https://www.cnblogs.com/wchxj/p/8729503.html 错误理解 在开始深入讲解之前,有必要纠正一下大家以前的那些错误看法了.如果你有以下想法,那么你有必要好好 ...
- Chrome - 使用 开发者工具 对页面截图
概述 使用 开发者工具 对页面截图 背景 经常需要截图 常用的截图模式有这些 窗口截图 区域截图 gif 问题 Chrome 如何截长图 firefox 好像有插件 1. 解决: 使用 Chrome ...
- Hadoop架构: HDFS中数据块的状态及其切换过程，GS与BGS
该系列总览: Hadoop3.1.1架构体系——设计原理阐述与Client源码图文详解 : 总览 首先,我们要提出HDFS存储特点: 1.高容错 2.一个文件被切成块(新版本默认128MB一个块)在不 ...
- Django 报错no sucn column: OpretionalError
1.报错原因:新增的字段未能同步数据库 2.解决办法:删除整个数据库,然后重新编译,然后over 1.rm -rf db.sqlites3 #删除数据库 2.rm -rf cmdb/migrarion ...
- 6_7 树的层次遍历（UVa122）<二叉树的动态创建与BFS>
树状结构在计算机科学的许多领域中都相当重要.本问题牵涉到建立树及走访树.给你一二叉树,你的任务是写一个程序来打印依「阶层(level-order)」走访的结果.在本问题中,二叉树的每个节点含有一个正整 ...
- 如何让DOS命令在新窗口打开
可以调用别外的批处理如 start a.batstart b.batstart c.bat 新建a.bat.B.BAT.C.CAT,在这几个批处理中输入你的命令. 以上我自己测试通过.
- memcache安装 基于Red Hat 7.4
Linux版本为 Red Hat 7.4 一.安装 1.下载:http://memcached.org/downloads 解压: tar -xzvf memcached-1.5.3.tar.gz 得 ...