css3实现固定表格头部而无需设置单元格td的宽度

背景

最近小弟在工作都是做后台系统,一堆的表格,各种各样的。然后需求上要有固定的表头的表格,如下图所示

table-thead-fixed

在网上查询固定表头的实现方式为:

  • thead 设置为 fixed
  • 拆分表格为两个表格 thead一个,tbody一个

​然而上面的实现上有个条件是**要提前设置单元格的大小 **, 如果没有设置对的会就是下面这个样子(下面是其它的博主的例子图, 我盗用下 😏 )

​😑😑😑😑 我可不要固定单元格宽度,固定的宽度怎么做组作啊。。。

在css3中的transform不会改变原来元素的大小位置,相当于是复制了份出来,然后transform的计算速也够快(这里婊一下absolute加left ,top,经常慢半拍)。用这个做这个功能非常合适,还要加点js用于监听滚轮。

实现方式

运行我写的 在线例子 打不开,请使用科学上网*😏😏😏

下面贴下代码

js:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// Code goes here
'use strict'
window.onload = function(){
var tableCont = document.querySelector('#table-cont')
/**
* scroll handle
* @param {event} e -- scroll event
*/
function scrollHandle (e){
console.log(this)
var scrollTop = this.scrollTop;
this.querySelector('thead').style.transform = 'translateY(' + scrollTop + 'px)';
}

tableCont.addEventListener('scroll',scrollHandle)
}

css:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
/* Styles go here */

.table-cont{
/**make table can scroll**/
max-height: 200px;
overflow: auto;
/** add some style**/
/*padding: 2px;*/
background: #ddd;
margin: 20px 10px;
box-shadow: 0 0 1px 3px #ddd;
}
thead{
background-color: #ddd;
}

html:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
<!DOCTYPE html>
<html>

<head>
<link data-require="bootstrap@*" data-semver="3.3.7" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>

<body>
<div class='table-cont' id='table-cont'><!--看这里-->

<table class="table table-striped">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
</div>
</body>

</html>

table-thead-fixed

搞定,美滋滋👍👍👍