table固定列html5,css+js简单实现table固定首行首列

说明：

使用easyui等都可以实现table固定首行首列的功能。

但仅仅只需要这一个功能，完全可以用css+js简单实现而不用引入更多工具。

网上找到很多的思路，自己对其中比较简单的一个进行了整理。

大致效果：

Paste_Image.png

页面布局：

Paste_Image.png

如上图：

1、整个页面分成左右两部分：

2、左边分为上下两部分

3、右边分为上下两部分(红色框比较特殊，多加一个div为了防止列的偏移)

具体步骤：

1、html：(省略tr、td)

2、css：

(1)left_div与right_div 使用左浮动

(2)上图蓝色div框，宽度可以都使用100%，跟随左右大的div(left_div与right_div)

(3)left_div2 及 right_div1 需要加上overflow: hidden

(4)防止列错位：right_divx(上图红色div框)的宽度需要大于right_table1及right_table2，20px

(5)防止行错位：left_div2 高度大于 right_div2 高度，20px

td{

width: 100px;

}

#left_div{

width:200px;

float: left;

}

#left_div1{

width: 100%;

}

#left_div2{

width: 100%;

height: 100px;

overflow: hidden;

}

#right_div{

width: 600px;

float: left;

}

#right_div1{

width: 100%;

overflow: hidden;

}

#right_divx{

width: 820px;

}

#right_div2{

width:100%;

height:120px;

overflow: auto;

}

#right_table1{

width: 800px;

}

#right_table2{

width: 800px;

}

3、js：

思路：

1、左下div(left_div2) 随着右下div(right_div2) 上下移动

2、右上div(right_div1) 随着右下div(right_div2) 左右移动

var right_div2 = document.getElementById("right_div2");

right_div2.onscroll = function(){

var right_div2_top = this.scrollTop;

var right_div2_left = this.scrollLeft;

document.getElementById("left_div2").scrollTop = right_div2_top;

document.getElementById("right_div1").scrollLeft = right_div2_left;

}

table固定列html5,css+js简单实现table固定首行首列相关推荐

css+js简单实现table固定首行首列
说明: 使用easyui等都可以实现table固定首行首列的功能. 但仅仅只需要这一个功能,完全可以用css+js简单实现而不用引入更多工具. 网上找到很多的思路,自己对其中比较简单的一个进行了整理. ...
html5+css+js简单了解
最近敲了敲HTML5的代码,感觉真的是很吸引人的东西,反正我是非常喜欢的,所以想写一点关于HTML的东xi 首先呢我了解的不多,所以也是想写一点点我对它的认识. 说起HTML5是打开Pycharm敲p ...
html框架有什么作用,使用HTML5+CSS+JS框架有那些好处
使用HTML5+CSS+JS框架有那些好处 2017-12-08 相信很多程序猿朋友都用过框架,不过你是否知道你用的是HTML框架.CSS框架还是JS框架,其实这都不重要,重要的是使用框架的目的是什么 ...
第一次预习作业（html,css,js简单介绍，HTML常用标签）
目录一.HTML,CSS,JS,简单介绍 1.HTML 2.CSS 3.JS 二.HTML常用标签一.HTML,CSS,JS,简单介绍 1.HTML HTML 是用来描述网页的一种语言. HTML ...
js实现表格首行首列固定滑动
js+css实现table首行首列的冻结效果. 这个方案是把表格分为4块,首行首列不可滑动,利用onscroll 动态根据内容设置冻结首行首列内容. html <div id="lef ...
HTML5+css+JS实现页面打枪声音特效减压玩法 PUBG 大吉大利今晚吃鸡
HTML5+css+JS实现页面打枪声音特效减压玩法 PUBG 大吉大利今晚吃鸡 css部分 *{margin: 0;padding:0;}body{min-height:100vh;overflo ...
CSS笔试题: 实现表格首行首列固定和自适应窗口
今天校招笔试题要求实现一个首行首列固定,宽度自适应窗口变化,但窗口缩小到一定宽度不能再缩小,出现水平滚动条- 当时我写错了,我一时想不起改用什么办法首行首列固定,用绝对定位,父亲相对定位-这样会有很多 ...
打地鼠小游戏（HTML5+CSS+JS）
打地鼠小游戏(HTML5+CSS+JS) 文章目录打地鼠小游戏(HTML5+CSS+JS) 预设有两个文件(htlm和css)加一个文件夹(放图片) 设置基本界面 (1)背景图 (2)开始按钮 (3 ...
html表格固定首行首列
html表格固定首行首列,适用于标准表格,格式如下: <div><table><tbody><tr><th></th></ ...

table固定列html5,css+js简单实现table固定首行首列

table固定列html5,css+js简单实现table固定首行首列相关推荐

最新文章

热门文章