一个 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

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

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

<table >
<thead>
	<tr>
	<th></th>
	</tr>
</thead>

<tr>
</tr>
</table>

需要用到的2个属性

table-layout : fixed  
position : sticky

table-layout

table-layout属性有两种特定值：

auto（预设值）-表格的总宽度决定每一个储存格（cell）的最大值

fixed - 表格的总宽度决定于表格width的定义,以及各栏位（column）width的定义

为了让表格呈现滚动效果，必须设定table-layout:fixed 并且给与表格宽度。

table {
	table-layout: fixed;
	width: 100%;
}

Position

大家对position 的作用应该不陌生，而固定表格则需要使用到 position : sticky 的设定

sticky 的表现类似于relative 和fixed 的合体，在目标区域中可见时，他的行为就像relative 不会有任何变化，而当页面滚动超出目标区域时，他的表现改为fixed会固定于目标位置

要注意的是当position : sticky应用于table，只能作用于和，并且一定要定义目标位置 left / right / top / bottom 才会出现固定效果！

thead tr th {
	position:sticky;
	top:0;
}