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有个 非空的字段 按钮,点击这个后,会自动的把空的行数据信息给隐藏掉,这里我们来设置一下让其行数据不隐藏,为空的就为空. 主要更改两个文 ...
随机推荐
- 2.4 【配置环境】TestNG安装
两种方法可以安装TestNG Eclipse插件: (来源:http://blog.csdn.net/hongchangfirst/article/details/7679849/) 第一种,离线安 ...
- Django中的分页操作、form校验工具
批量插入数据 后端: def fenye(request): book_list=[] for i in range(100): book_list.append(models.Book(title= ...
- 小白艰难的Python图像的绘制
1.贪吃蛇 代码: import turtle turtle.setup(650,350) turtle.penup() turtle.fd(-250) turtle.pendown() turtle ...
- EVE-NG镜像模板资源占用统计
转:http://www.emulatedlab.com/forum.php?mod=viewthread&tid=432&extra=page%3D1 EVE Image fold ...
- 自带日期时间 showDatePicker显示中文日期_Flutter时间控件显示中文
flutter showDatePicker showTimePicker显示中文日期 1.配置flutter_localizations依赖 找到pubspec.yaml配置flutter_loca ...
- 测试工具 - IDEA - IDEA Code Coverage
概述 使用 idea 自带的 code coverage 工具 背景 了解 白盒测试用例设计 和 测试覆盖率 之后, 大概就需要 实践 了 实践的话, 还是需要 工具 来检验效果 工具选取 选项 Ja ...
- Javascript自增、自减运算符
JavaScript自增.自减运算符与表达式语法 var i++; var-- 声明变量 i-- 变量名 ++ -- 自增运算符 JavaScript自增.自减运算符与表达式 JavaScript自增 ...
- Missing artifact com.alibaba:dubbo:jar:2.8.4 dubbo编译打包
由于maven中心仓库中没有dubbo2.8.4,所以需要到github中下载源码包自己编译. 1.下载dubbo,地址:https://github.com/dangdangdotcom/dubbo ...
- C：函数 注意点
形参 在定义函数时指定的形参,在未出现函数调用时,它们并不占内存中的存储单元,因此称它们是形式参数或虚拟参数,简称形参,表示它们并不是实际存在的数据,所以,形参里的变量不能赋值. C不像C++里一样可 ...
- localhost: Permission denied (publickey,gssapi-keyex,gssapi-with-mic,password).
在开启hadoop时候报错:localhost: Permission denied (publickey,gssapi-keyex,gssapi-with-mic,password). 此时 ssh ...