kk Blog —— 通用基础


date [-d @int|str] [+%s|"+%F %T"]
netstat -ltunp
sar -n DEV 1

一个 table 实现固定行、列

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

language, web

« alert函数执行顺序问题 两个 table 实现固定列 »