前端：普通表格固定行列

文章说明：该文章通过html，css技术实现表格的固定行列的实现；行的隔行背景效果；悬停行的背景效果；左右滚动效果；表格扩大缩小效果；边框效果等

一、效果

1、进入页面表格效果

如下图，表格有直接展现的表头背景色：蓝底；表格内容的隔行颜色背景：奇数行颜色为白色，偶数行颜色为灰色；悬停到行颜色效果：鼠标悬停到行会有浅蓝色底；左右滚动效果：表格会固定一个宽高，当表格内容超出表格的宽高会出现滚动效果。还有其余多种样式效果。

2、固定列和表头效果

固定表头和固定第一类和第二列

3、手动调整宽高

二、核心实现

1、表格外层div

• 设置固定的宽高：width、height
• 设置左右上下滚动条：overflow: auto;
• 可以手动调整div的宽高：resize: both;

.tableinfo {
    width: 600px;
    height: 500px;
    border: 1px solid black;
    overflow: auto;
    resize: both;/* 允许调整宽高 */
}

2、表格table样式

• 控制表格边框的合并方式 border-collapse: collapse;：相邻单元格的边框会合并为单一边框（更紧凑的显示）
• 表格添加阴影效果 box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);：水平偏移量0（不偏移），垂直偏移量0（不偏移），阴影模糊半径10px（值越大越模糊）,阴影颜色（黑色，10%透明度）
• 控制表格的布局算法 table-layout: fixed;:fixed表格宽度有表格宽度和列宽决定而不是内容，列宽会平均分配(或按指定宽度分配)
• 设置表格宽度width: 100%;：表格撑满容器宽度，结合table-layout: fixed;，列宽会按比例分配

table {
    border-collapse: collapse;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    table-layout: fixed;
    width: 100%;
}

•  设置表格边框

table {
    border: 1px solid #dee2e6;
}

3、表头

• 固定表头position: sticky;：创建粘性定位元素，滚动时保持可见的表头
• 固定的表头的位置top: 0;：定义粘性定位的触发位置，元素距离视口顶部0px时，开始固定
• 表头文字不允