前端：普通表格固定行列_html table 固定列

技术文档

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

一、效果

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

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

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

控制表格边框的合并方式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;}