欧美成人精品手机在线观看_69视频国产_动漫精品第一页_日韩中文字幕网 - 日本欧美一区二区

說(shuō)明：

使用easyui等都可以實(shí)現(xiàn)table固定首行首列的功能。
但僅僅只需要這一個(gè)功能，完全可以用css+js簡(jiǎn)單實(shí)現(xiàn)而不用引入更多工具。
網(wǎng)上找到很多的思路，自己對(duì)其中比較簡(jiǎn)單的一個(gè)進(jìn)行了整理。

大致效果：

頁(yè)面布局：

如上圖：
1、整個(gè)頁(yè)面分成 左右 兩部分：
2、左邊分為 上下 兩部分
3、右邊分為 上下 兩部分(紅色框比較特殊，多加一個(gè)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 使用左浮動(dòng)
(2)上圖藍(lán)色div框，寬度可以都使用100%，跟隨左右大的div(left_div與right_div)
(3)left_div2 及 right_div1 需要加上overflow: hidden
(4)防止列錯(cuò)位：right_divx(上圖紅色div框)的寬度需要大于right_table1及right_table2，20px
(5)防止行錯(cuò)位：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) 上下移動(dòng)
2、右上div(right_div1) 隨著 右下div(right_div2) 左右移動(dòng)

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;
}