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有个 非空的字段 按钮,点击这个后,会自动的把空的行数据信息给隐藏掉,这里我们来设置一下让其行数据不隐藏,为空的就为空. 主要更改两个文 ...
随机推荐
- html中的路径详解
路径指文件存放的位置,在网页中利用路径可以引用文件,插入图像.视频等.表示路径的方法有两种:相对路径,绝对路径.以下讨论均是在HTML环境下进行. 相对路径 相对路径是指目标相对于当前文件的路径,网页 ...
- 第二十六篇 玩转数据结构——二分搜索树（Binary Search Tree）
1.. 二叉树 跟链表一样,二叉树也是一种动态数据结构,即,不需要在创建时指定大小. 跟链表不同的是,二叉树中的每个节点,除了要存放元素e,它还有两个指向其它节点的引用,分别用Node l ...
- python+matplotlib制作雷达图3例分析和pandas读取csv操作
1.例一 图1 代码1 #第1步:导出模块 import numpy as np import matplotlib.pyplot as plt from matplotlib import font ...
- 利用tensorboard将数据可视化
注:代码是网上下载的,但是找不到原始出处了,侵权则删 先写出visual类: class TF_visualizer(object): def __init__(self, dimension, ve ...
- 并发编程之CyclicBarrier
栅栏类似于闭锁,它能阻塞一组线程直到某个事件的发生.栅栏与闭锁的关键区别在于,所有的线程必须同时到达栅栏位置,才能继续执行.闭锁用于等待事件,而栅栏用于等待其他线程. CyclicBarrier可以使 ...
- OO博客作业-《JML之卷》
OO第三单元小结 一.JML语言理论基础以及应用工具链情况梳理 一句话来说,JML就是用于对JAVA程序设计逻辑的预先约定的一种语言,以便正确严格高效地完成程序以及展开测试,这在不能容忍细微错误的工程 ...
- cordova的安装与配置
1.安装nodejs(自动包含npm) 2.在命令行中通过npm语句npm install -g cordova 安装cordova(如果提示网络连接失败,需要设置网络代理,搭理网址:npm conf ...
- java中Integer面试的坑
class Test{ public static void main(String[] args){ //当值在[-128,127]中,不创建新的Integer Integer f1 = 100,f ...
- Cesium 基于MapBox底图加载3DTiles 模型
3DTiles 模型采用 CATIA V5 R22 --->3dxml --->GLB--->B3DM var extent = Cesium.Rectangle.fromDeg ...
- 安卓开发：图片的显示Mode
安卓开发中将图片放置在ImageView中展示,涉及到图片显示的模式,跟iOS开发中UIView的contentMode属性是一个意思,在安卓UI元素中使用的属性是scaleType,其中枚举值的效果 ...