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有个 非空的字段 按钮,点击这个后,会自动的把空的行数据信息给隐藏掉,这里我们来设置一下让其行数据不隐藏,为空的就为空. 主要更改两个文 ...
随机推荐
- Yum与list结合
我用两台Linux LinuxA IP:192.168.10.101 LinuxB IP:192.168.10.102 首先我们在LinuxA上挂载光驱和安装FTP服务器 然后安装 ...
- web前端-基础篇
该篇仅是本人学习前端时,做的备忘笔记: 一.背景图片设置: 设置背景图时的css代码:background-image:url(图片的url路径); ps:设置好这个背景后请一定要设置该背景图片的大小 ...
- fiddler中文乱码解决方案
只用添加一个注册表变量就行 cmd窗口执行regedit命令,在弹出的注册表编辑界面找到fiddler 右击新建一个字符传值 HeaderEncodingGBK 结果如上图右所示~ 重启fiddler ...
- 《C语言程序设计》王希杰 课后答案
仅供参考,好好学习,不要骗自己哦! 在线预览 预览链接: https://www.kdocs.cn/l/shOy4IgXl 下载: 链接1: http://t.cn/AiBK2mgJ 链接2: htt ...
- git相关项目迁移
1). 从原地址克隆一份裸版本库,比如原本托管于 GitHub. git clone --bare git://github.com/username/project_old.git --bare 创 ...
- 毕向东java基础总结
Java基础知识总结(超级经典) 写代码: 1,明确需求.我要做什么? 2,分析思路.我要怎么做?1,2,3. 3,确定步骤.每一个思路部分用到哪些语句,方法,和对象. 4,代码实现.用具体的java ...
- 基于JSP开发手机销售购物商城系统
开发环境: Windows操作系统开发工具:Eclipse+Jdk+Tomcat+MySQL数据库 运行效果图: 源码及原文链接:https://javadao.xyz/forum.php?mod=v ...
- Springmvc-crud-07（springmvc标签错误）
错误:springmvc标签错误 原因:1.在springmvc中的form标签中没有绑定modelAttribute属性 2.必须要获取到参数(可以创建map对象,进行存储参数,再用modelAtt ...
- Plastic Bottle Manufacturer Tips: Use Caution For Plastic Bottles
Plastic bottles use polyester (PET), polyethylene (PE), polypropylene (PP) as raw materials, after a ...
- 吴裕雄--天生自然神经网络与深度学习实战Python+Keras+TensorFlow：TensorFlow与神经网络的实现
import tensorflow as tf import numpy as np ''' 初始化运算图,它包含了上节提到的各个运算单元,它将为W,x,b,h构造运算部件,并将它们连接 起来 ''' ...