表格的固定 头和列的实现
核心思想:css加js实现:分为四个表格:,四个区域,左边一个大的div,右边一个大的div,各自包着上下两个div,,然后里面包着table,
右边特殊点,上边还包了一层div,才是表格:
代码如下
固定标题列、标题头table
账号
姓名
1
1
2
2
3
3
4
4
5
5
6
6
7
7
8
8
9
9
10
10
11
11
12
12
13
13
14
14
15
15
16
16
17
17
18
18
19
19
20
20
字段A
字段B
字段C
字段D
字段E
字段F
1
1
1
1
1
1
2
2
2
2
2
2
3
3
3
3
3
3
4
4
4
4
4
4
5
5
5
5
5
5
6
6
6
6
6
6
7
7
7
7
7
7
8
8
8
8
8
8
9
9
9
9
9
9
10
10
10
10
10
10
11
11
11
11
11
11
12
12
12
12
12
12
13
13
13
13
13
13
14
14
14
14
14
14
15
15
15
15
15
15
16
16
16
16
16
16
17
17
17
17
17
17
18
18
18
18
18
18
19
19
19
19
19
19
20
20
20
20
20
20
分析:
table {
border-collapse: collapse;
border-spacing: 0px;
width: 100%;
border: #000 solid 0px;
}border-collapse 属性设置表格的边框是否被合并为一个单一的边框，还是象在标准的 HTML 中那样分开显示。
| separate | 默认值。边框会被分开。不会忽略 border-spacing 和 empty-cells 属性。 |
| collapse | 如果可能，边框会合并为一个单一的边框。会忽略 border-spacing 和 empty-cells 属性。 |
| inherit | 规定应该从父元素继承 border-collapse 属性的值。 |
border-spacing 属性设置相邻单元格的边框间的距离（仅用于“边框分离”模式）。
该属性指定分隔边框模型中单元格边界之间的距离。在指定的两个长度值中，第一个是水平间隔，第二个是垂直间隔。除非 border-collapse 被设置为 separate，否则将忽略这个属性。尽管这个属性只应用于表，不过它可以由表中的所有元素继承。
table td {
border: 1px solid #000;
height: 25px;
text-align: center;
border-left: 0px;
} table th {
background: #edd3d4;
color: #a10333;
border: #000 solid 1px;
white-space: nowrap;
height: 41px;
border-top: 2px;
border-left: 2px;
}white-space规定段落中的文本不进行换行：
|
normal |
默认。空白会被浏览器忽略。 |
| pre | 空白会被浏览器保留。其行为方式类似 HTML 中的 标签。 |
| nowrap | 文本不会换行，文本会在在同一行上继续，直到遇到 标签为止。 |
| pre-wrap | 保留空白符序列，但是正常地进行换行。 |
| pre-line | 合并空白符序列，但是保留换行符。 |
| inherit | 规定应该从父元素继承 white-space 属性的值。 |
.t_left {
width: 20%;
height: auto;
float: left;
border-top: 1px solid #000;
border-left: 1px solid #000;
} .t_r_content {
width: 100%;
height: 220px;
background: #fff;
overflow: auto;
}
.cl_freeze {
height: 220px;
overflow: hidden;
width: 100%;
} 滑动触发:
scrollTop
解释：元素滚动条内的顶部隐藏部分的高度。