https://www.cnblogs.com/tiandi/p/13883306.html
https://www.cnblogs.com/acmilan/p/4217121.html
https://blog.csdn.net/m0_54281425/article/details/124478023
all.css
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
| body {
font-family: Tahoma, Times New Roman, Times, serif;
font-size: 13px;
background-color: #E8E8E8;
}
table {
border: 0px;
font-size: 12.99px;
border-collapse:collapse;
margin-bottom: 10px;
margin-top: 10px;
}
th {
padding-left: 1px;
padding-right: 1px;
border: 1px solid #B9B9B9;
height: 28px;
min-width: 55px;
}
td {
padding-left: 3px;
padding-right: 5px;
white-space: nowrap;
border: 1px solid #B9B9B9;
height: 28px;
min-width: 10px;
}
|
child2.css
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
| thead, thead tr th {
position: sticky;
z-index: 2;
top: 0;
background-clip: padding-box;
background-color: #E8E8E8;
outline-color: #B9B9B9;
outline-style: solid;
outline-width: thin;
}
@-moz-document url-prefix(){
thead, thead tr th {
border: none;
}
}
th:nth-child(2) {
position: sticky;
z-index: 3;
left: 0;
background-clip: padding-box;
background-color: #E8E8E8;
}
td:nth-child(2) {
position: sticky;
z-index: 1;
left: 0;
background-clip: padding-box;
background-color: #E8E8E8;
}
|
table
1
2
3
4
5
6
7
8
9
10
| <table >
<thead>
<tr>
<th></th>
</tr>
</thead>
<tr>
</tr>
</table>
|
需要用到的2个属性
1
2
| table-layout : fixed
position : sticky
|
table-layout
table-layout属性有两种特定值：
auto（预设值）-表格的总宽度决定每一个储存格（cell）的最大值
fixed - 表格的总宽度决定于表格width的定义,以及各栏位（column）width的定义
为了让表格呈现滚动效果，必须设定table-layout:fixed 并且给与表格宽度。
1
2
3
4
| table {
table-layout: fixed;
width: 100%;
}
|
Position
大家对position 的作用应该不陌生，而固定表格则需要使用到 position : sticky 的设定
sticky 的表现类似于relative 和fixed 的合体，在目标区域中可见时，他的行为就像relative 不会有任何变化，而当页面滚动超出目标区域时，他的表现改为fixed会固定于目标位置
要注意的是当position : sticky应用于table，只能作用于
和 | ，并且一定要定义目标位置 left / right / top / bottom 才会出现固定效果！
1
2
3
4
| thead tr th {
position:sticky;
top:0;
}
|
| 
