前端：普通表格固定行列

一、效果

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时，开始固定
表头文字不允许换行white-space: nowrap;
设置表头的优先级为二级(这里设置的999表示第二的优先级，这里设置的有99，999，1000)：z-index: 999; 。99的优先级是固定的列的的优先级，1000表示固定列的表头。固定列的表头>表头>固定列

thead th {background-color: #3498db;color: #fff;height: 50px;padding: 0 20px;text-align: center;position: sticky;top: 0;box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);white-space: nowrap;width: 100px;z-index: 999;
}

4、单元格奇偶行

设置奇行普通背景色：

tbody tr:nth-child(even) {
background-color: #f4f4f4;
}

设置偶行普通背景色：

tbody tr:nth-child(odd) {
background-color: #ffffff;
}

/* 隔行变色效果 */
tbody tr:nth-child(even) {background-color: #f4f4f4;
}tbody tr:nth-child(odd) {background-color: #ffffff;
}

固定列的奇偶行效果设置

/* 隔行变色效果修正 */
tbody tr:nth-child(odd) td:nth-child(1),
tbody tr:nth-child(odd) td:nth-child(2) {background-color: #ffffff;
}tbody tr:nth-child(even) td:nth-child(1),
tbody tr:nth-child(even) td:nth-child(2) {background-color: #f4f4f4;
}

5、加表格右边线

除去最后一列都需要加上右侧边线

thead th:not(:last-child),tbody td:not(:last-child) {border-right: 1px solid #dee2e6;
}

6、行悬停效果

表格行的悬停，颜色效果转变，并且给一个颜色的过渡效果

/* 悬停效果 */
tbody tr:hover {background-color: #e3f2fd;transition: background-color 0.2s ease;
}

7、固定前两列

固定表头position: sticky;：创建粘性定位元素，滚动时保持可见的表头
固定的表头的位置left: 0;：定义粘性定位的触发位置，元素距离视口顶部0px时，开始固定
固定的表头的位置left: 100px;：第二列距离第一列的距离是100px，所以开始位置为距离左侧100px

/* 固定前两列 */
thead th:nth-child(1),
tbody td:nth-child(1) {position: sticky;left: 0;z-index: 99;
}thead th:nth-child(2),
tbody td:nth-child(2) {position: sticky;left: 100px;z-index: 99;
}

三、代码实现

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<style>.tableinfo {width: 600px;height: 500px;border: 1px solid black;overflow: auto;resize: both;/* 允许调整宽高 */}table {border-collapse: collapse;box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);table-layout: fixed;width: 100%;}thead th {background-color: #3498db;color: #fff;height: 50px;padding: 0 20px;text-align: center;position: sticky;/* 固定列 */top: 0;box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);white-space: nowrap;width: 100px;z-index: 999;}/* 表格单元格样式 */tbody td {height: 50px;text-align: center;border-bottom: 1px solid #e0e0e0;width: 100px;}/* 隔行变色效果 */tbody tr:nth-child(even) {background-color: #f4f4f4;}tbody tr:nth-child(odd) {background-color: #ffffff;}/* 悬停效果 */tbody tr:hover {background-color: #e3f2fd;transition: background-color 0.2s ease;}/* 边框样式 */table {border: 1px solid #dee2e6;}thead th:not(:last-child),tbody td:not(:last-child) {border-right: 1px solid #dee2e6;}/* 固定前两列 */thead th:nth-child(1),tbody td:nth-child(1) {position: sticky;left: 0;z-index: 99;}thead th:nth-child(2),tbody td:nth-child(2) {position: sticky;left: 100px;z-index: 99;}/* 设置固定列的背景色和优先级 */thead th:nth-child(1),thead th:nth-child(2) {background-color: #2b8aca;z-index: 1000;}/* 隔行变色效果修正 */tbody tr:nth-child(odd) td:nth-child(1),tbody tr:nth-child(odd) td:nth-child(2) {background-color: #ffffff;}tbody tr:nth-child(even) td:nth-child(1),tbody tr:nth-child(even) td:nth-child(2) {background-color: #f4f4f4;}/* 悬停效果修正 */tbody tr:hover td:nth-child(1),tbody tr:hover td:nth-child(2) {background-color: #e3f2fd;transition: background-color 0.2s ease;}
</style><body><div class="tableinfo"><table><thead><th>第一列</th><th>第二列</th><th>第三列</th><th>第四列</th><th>第五列</th><th>第六列</th><th>第七列</th><th>第八列</th><th>第九列</th></thead><tbody><tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td></tr><tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td></tr><tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td></tr><tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td></tr><tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td></tr><tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td></tr><tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td></tr><tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td></tr><tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td></tr><tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td></tr></tbody></table></div>
</body></html>