position: sticky;でtableを下スクロール時はヘッダ、横スクロール時は最左を固定
Result
position: sticky;を使ったスプレッドシートライクなtableのサンプル。
css
.table-wrapper {
max-width: 500px;
overflow: scroll;
}
table {
position: relative;
border: 1px solid #ddd;
border-collapse: collapse;
}
td, th {
white-space: nowrap;
border: 1px solid #ddd;
padding: 20px;
text-align: center;
}
th {
background-color: #eee;
position: sticky;
top: -1px;
z-index: 2;
}
th:first-of-type {
left: 0;
z-index: 3;
}
tbody tr td:first-of-type {
background-color: #eee;
position: sticky;
left: -1px;
text-align: left;
}
|
html
<div class="table-wrapper">
<table>
<thead>
<tr>
<th></th>
<th>A</th>
<th>B</th>
<th>C</th>
.
.
.
</tr>
</thead>
<tbody>
<tr>
<td>和歌山</td>
<td>1</td>
<td>1</td>
.
.
.
</table>
</div>
|
can i use
via
A Simple Responsive Spreadsheet
