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

Question

“LINE (n)” header 不像“SENSOR (n)” header 那样固定。如何解决这个问题？

.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

Answer 1

需要根据row添加tr th的top position，否则第一行和第二行会覆盖上面的，在css下面添加>

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