表头的colspan和rowspan固定位置可滚动

Question

表头的colspan和rowspan固定位置可滚动

5

“LINE（n）”标题不像“SENSOR（n）”标题一样固定。该如何解决？

.table-scroll {
    position: relative;
    width:100%;
    z-index: 1;
    margin: auto;
    overflow: scroll;
    height: 55vh;
}
.table-scroll table {
    width: 100%;
    min-width: 100px;
    margin: auto;
    border-collapse: separate;
    border-spacing: 0;
}
.table-wrap {
    position: relative;
}
.table-scroll th,
.table-scroll td {
    padding: 5px 10px;
    border: 1px solid #000;
    #background: #fff;
    vertical-align: top;
    text-align: center;
}
.table-scroll thead th {
    background: #333;
    color: #fff;
    position: -webkit-sticky;
    position: sticky;
    top: 0;
}
th.sticky {
    position: -webkit-sticky;
    position: sticky;
    left: 0;
    z-index: 2;
    background: #ccc;
}
thead th.sticky {
    z-index: 5;
}

当我左右滚动时，“LINE (n)”标题正常工作，但当我上下滚动时，“LINE (n)”标题会移动。如何修复？ https://codepen.io/anon/pen/pqPOyB

- Andi Tsung

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Hiren Vaghasiya · Accepted Answer

您需要根据行添加tr th的顶部位置，否则第一行和第二行会重叠在一起，请添加以下css：

.table-scroll thead tr:nth-child(2) th {
    top: 30px;
}