エクセルの、先頭行を固定的なアレです。
<div id="list">
<table></table>
</div>
のように、全体の高さやスクロールの許可をしておくとより使い勝手がいいです。
#list {
height: 300px;
max-width: 100%;
overflow: scroll;
}
td, th {
white-space: nowrap;
padding: 20px;
}
td {
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
max-width: 300px;
}
th {
position: sticky;
top: -1px;
z-index: 2;
}
th:first-of-type {
left: 0;
z-index: 3;
}
tbody tr td:first-of-type {
background-color: white;
position: sticky;
left: -1px;
}
