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有个 非空的字段 按钮,点击这个后,会自动的把空的行数据信息给隐藏掉,这里我们来设置一下让其行数据不隐藏,为空的就为空. 主要更改两个文 ...
随机推荐
- 【网易官方】极客战记（codecombat）攻略-地牢-逃脱
关卡连接: https://codecombat.163.com/play/level/breakout 矮人正在追你,前方道路已被堵死. 简介: 通过攻击 "弱门" 释放盟友,这 ...
- linux文件或文件夹常见操作，排查部署在linux上程序问题常用操作
创建文件夹 mkdir [-p] DirName [ 在工作目录下,建立一个名为 A 新的子目录 : mkdir A 在工作目录下的 B目录中,建立一个名为 T 的子目录: 若 B 目录不存在,则 ...
- 2019牛客暑期多校训练营（第三场） J LRU management 模拟链表操作
输入n, m,n表示n种操作,m表示最多可以容纳m个串. 第一种操作:先在容器里找是否存在这个串,如果不存在,则添加在末尾,这个串携带了一个值v. 如果存在,则先把之前存在的那个拿出来,然后在后面添加 ...
- 解决wps for linux缺失windows字体
操作步骤 1.下载缺失字体 链接: https://pan.baidu.com/s/1ZUbtQ96b8RVbH0LrXb_GlQ 密码: nsr4 2.解压字体 unzip wps-font-sy ...
- 每天进步一点点------Alpha半透明图形叠加算法Matlab+Verilog实现
Alpha图形叠加算法Matlab+Verilog实现 1.1. Alpha算法的研究 Alpha通道是一个8位的灰度通道,该通道用256级灰度来记录图像中的透明度信息,定义透明.不透明和半透明区域, ...
- python:面试算法题
''' 1.买卖股票的最佳时机给定一个数组,它的第?i?个元素是一支给定股票第?i?天的价格. 如果你最多只允许完成一笔交易(即买入和卖出一支股票),设计一个算法来计算你所能获取的最大利润. 注意你不 ...
- 封装一个漂亮的ant design form标签组件
在ant design 的form组件中 能用于提交的组件比较少,所以我在这写了一个可以单选.多选标签提交的组件,调用非常简单. 代码: import React,{Fragment} from 'r ...
- Arctic Network（洛谷）--北极通讯网络（loj）
洛谷传送门 loj传送门 一道蛮基础的最小生成树的题 题意也没绕什么圈子 只是叙述的有点累赘而已(loj上是这样的 也就读入加建边需要稍稍稍多想一下下 对于我这么一个蒟蒻 这是一道很好的板子题 (洛谷 ...
- Spring的事务实现原理
主流程 Spring的事务采用AOP的方式实现. @Transactional 注解的属性信息 name 当在配置文件中有多个 TransactionManager , ...
- TOPSIS算法
title: TOPSIS算法 date: 2020-02-24 11:18:06 categories: 数学建模 tags: [评价模型, MATLAB] mathjax: true 定义 C ...