css+js简单实现table固定首行首列
来源:互联网 发布:linux配置ftp 编辑:程序博客网 时间:2024/06/05 18:17
说明:
使用easyui等都可以实现table固定首行首列的功能。
但仅仅只需要这一个功能,完全可以用css+js简单实现而不用引入更多工具。
网上找到很多的思路,自己对其中比较简单的一个进行了整理。
大致效果:
页面布局:
如上图:
1、整个页面分成 左右 两部分:
2、左边分为 上下 两部分
3、右边分为 上下 两部分(红色框比较特殊,多加一个div为了防止列的偏移)
具体步骤:
1、html:(省略tr、td)
<div id="left_div"> <div id="left_div1"> <table id="left_table1"></table> </div> <div id="left_div2"> <table id="left_table2"></table> </div></div><div id="right_div"> <div id="right_div1"> <div id="right_divx"> <table id="right_table1"></table> </div> </div> <div id="right_div2"> <table id="right_table2"></table> </div></div>
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;}
作者:魔力小小鸟
链接:http://www.jianshu.com/p/3215f8dc4b39
來源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
阅读全文
0 0
- css+js简单实现table固定首行首列
- html table固定首行首列
- table表格首列首行固定
- table表头和首列的表格固定-CSS实现的Table表头固定
- table表头和首列的表格固定-CSS实现的Table表头固定
- table表头和首列的表格固定-JQuery、js实现的Table表头固定
- table固定首行首列(expression控制)
- js、css实现table表头固定
- JS和CSS固定标题列与首列
- css固定表格titile和首列的实现
- html表格固定首行首列
- js 实现 table 固定表头
- js 实现table标题固定
- 简单实现Table固定表头
- Vue多种方法实现表头、首列固定
- css 实现的TABLE 固定行列(IE)
- 纯css实现table表头固定
- css 固定table表头
- Openwrt开发日志——iptables对报文处理
- Winform实现后台推送,数据跨线程实时刷新控件
- adaboost学习(一)
- oracle 12c静默安装 Linux Oracle安装遇到的问题
- 多线程之常用函数
- css+js简单实现table固定首行首列
- 应用不相交集类生成迷宫
- 全面理解控制反转和依赖注入
- [kotlin系列] (s2_3)扩展、数据类、密封类
- Guass-newton
- 信息滚动效果制作
- WebService动态IP调用
- bugku SQL注入测试
- mapreduce程序日志打印配置