Question

“ 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

Answer 1

您需要基于tr th添加row的最高位置，否则第一行和第二行被覆盖在上方，在css下方添加

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

表标题colspan和rowpan修复位置可滚动

1 个答案: