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

说明:

使用easyui等都可以实现table固定首行首列的功能。
但仅仅只需要这一个功能,完全可以用css+js简单实现而不用引入更多工具。
网上找到很多的思路,自己对其中比较简单的一个进行了整理。

大致效果:

Paste_Image.png

页面布局:

Paste_Image.png

如上图:
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;
}
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 211,639评论 6 492
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,277评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 157,221评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,474评论 1 283
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,570评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,816评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,957评论 3 408
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,718评论 0 266
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,176评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,511评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,646评论 1 340
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,322评论 4 330
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,934评论 3 313
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,755评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,987评论 1 266
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,358评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,514评论 2 348

推荐阅读更多精彩内容

  • 本课来自http://www.imooc.com/learn/9请不要用作商业用途。 HTML5 HTML介绍 H...
    PYLON阅读 3,210评论 0 5
  • CSS浮动 首先div是块级元素,在页面中独占一行,自 上而下排列。 以上可以看出,即使div1de宽度很小,页...
    xf0128阅读 386评论 0 1
  • 本文以div元素布局为例。教程开始:首先要知道,div是块级元素(div与span),在页面中独占一行,自上而下排...
    TW妖妖阅读 386评论 0 1
  • jQuery基础 什么是JQ?一个优秀的JS库,大型开发必备JQ的好处?一简化JS的复杂操作二不再需要关心兼容性三...
    幺七阅读 941评论 0 2
  • 对于刚刚入门学习前端的渣渣来说,对于css浮动甚是不解,故找来优秀并通俗易解的文章来记录。 教程开始: 首先要知道...
    呆呆滴木木菇凉阅读 332评论 0 1