table header colspan and rowspan fix location scrollable

user_798885 0
Viewed 1960

the "LINE (n)" header is not fix like "SENSOR (n)" Header. how to fix this?

.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;
}

when i scroll left and right the "LINE (n)" header working fine, but when i scroll up and down the "LINE (n)" header will move. how to fix this?

https://codepen.io/anon/pen/pqPOyB

css html
1 Answers

You need to add top position of tr th based on row, otherwise first row and second row is override one above, add below css 

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