position:stickyとは
まだ完全に理解していないため間違っているかもしれないが自分の解釈で説明。
「positionプロパティ」で「absolute、fixed」を指定した要素を「relative」を指定した親要素を基準に位置配置するのはよく使用するパターンだと思う。
ただし「absolute、fixed」を指定した要素は「高さ」の概念がなくなってしまう。
「sticky（スティッキー）」の場合、高さを保持しつつ、親要素（sticky containerって言うらしい）に「relative」を指定しなくとも指定した位置にひっついてくれる。
「sticky」を指定した要素（sticky itemって言うらしい）が表示される範囲は親要素（sticky container）の中だけなので、親要素がスクロールで見えない位置までくると当然つられて見えなくなる。
正確に知りたい人やナンノコッチャ？な人は以下参照されてくだされ・・・
注意点は「ieでは使えない」
win10だったらedgeがあるので、あえてie11を使う人も少なくなるとは思うが注意。
今回の内容は「スマホ時の表組みをどうするか」なので問題ない。
左項目を固定した表組み
「レスポンシブの表組み②」で横スクロールで対処した記事を紹介したが、左に項目名があり列が多いとスクロールした際に項目名を見失ってしまう。
今回は「position:sticky」を使いそれに対処してみた表組みを目指す。
/* HTML */
<div class="table-wrap">
<table>
<thead>
<tr>
<th class="fixed-cell">No.</th>
<th>Name</th>
<th>Model</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<tr>
<th class="fixed-cell">項目名１</th>
<td>内容１-１</td>
<td>内容１-２</td>
<td>内容１-３</td>
</tr>
<tr>
<th class="fixed-cell">項目名２</th>
<td>内容２-１</td>
<td>内容２-２</td>
<td>内容２-３</td>
</tr>
<tr>
<th class="fixed-cell">項目名３</th>
<td>内容３-１</td>
<td>内容３-２</td>
<td>内容３-３</td>
</tr>
</tbody>
</table>
</div>CSSはスマホを想定した768pxでのブレイクポイントを使用。
/* CSS */
table {
width: 100%;
table-layout: fixed;
}
th, td {
border: 1px #ccc solid;
line-height: 1.6;
padding: .75em 1em;
}
th {
background: #f5f5f5;
text-align: left;
}
.fixed-cell {
color: #fff;
background: #555;
}
/* 768pxまでの表示 */
@media (max-width: 768px) {
.table-wrap {
width: 100%;
overflow: hidden;
overflow-x: scroll;
-webkit-overflow-scrolling: touch;
}
.table-wrap table {
width: 768px; /* 適宜変更 */
table-layout: auto;
}
.table-wrap .fixed-cell {
width: 8em;
position: -webkit-sticky;
position: sticky;
top: 0;
left: 0;
}
.table-wrap .fixed-cell:before {
content: "";
display: block;
width: 100%;
height: 100%;
border: 1px solid #ccc;
position: absolute;
top: -1px;
left: -1px;
}
}疑似要素を使用しているのは、スクロールした際に枠線が消えてしまうため補完。
PCの表示だとieをどうするかの問題があるが、その点を除けば応用範囲が広い「かなりステッキー」な方法ですね。
