table 表头和第三列固定

simple-table {

width: 100%;
border-collapse: collapse;
}

simple-table th,

simple-table td {

border: 1px solid #ddd;
padding: 8px;
text-align: left;
}

/* 固定表头 */

simple-table thead th {

position: sticky;
top: 0;
background-color: white;
z-index: 20; /* 确保表头在最上层 */
}

/* 修复原CSS中的错误选择器 */

simple-table thead th tr {

position: static; /* 重置错误的选择器 */
}

/* 固定第三列 */

simple-table th:nth-child(3),

simple-table td:nth-child(3) {

position: sticky;
left: 0;
z-index: 10;
background-color: white;
}

/* 第三列表头的特殊处理 */

simple-table thead th:nth-child(3) {

z-index: 30; /* 确保第三列表头同时在表头和固定列的最上层 */
}

table-container {

height: 800px;
overflow-x: auto; /* 启用水平滚动 */
overflow-y: auto;
}

posted @ 2025-05-13 15:20  云水潇湘  阅读(10)  评论(0)    收藏  举报