何かしらの集計システムを作った時に、数値が並ぶテーブル表を作ることが増えてきました。
（ていうか毎回作ってる）
他にも内容の文字が多いようなテーブルの場合なんかもありますね。
データベースを表示する時に、テーブルを使うのは一般的なんですよね。
そうしたテーブルって少量のデータ量ならいいんですが、まあまあな規模のWebサービスなどの場合、大きなテーブルになってスクロールを余儀なくされることがあります。
以前は、別途JavascriptでElementを作って対応をしていたけれども、どうやらCSSだけでヘッダ固定処理ができてしまうことがわかったので、そのやり方と解説をブログに残しておくことにします。
スクロールしなければいけないテーブルタグ
次のようなテーブルデータがある場合、これまでは、divタグなどで囲って（wrapして）、その中をoverflow:scrollする簡易処理をしていました。
URLなどを表に入れると、文字が長くなりすぎてしまうし、件数が桁違いに多くなってしまう事も多いので、スクロールは必須です。
でも、これだと、スクロールすると見出しが見えなくなってしまいますよね。
ヘッダ固定のスクロール
いかがでしょう？
見出しが常に表示されているので、何の項目なのか見失うことはないですよね。
コードと解説
該当の箇所だけのcssを抜き出すと以下のようになっています。
sample.html
<div class='sample sample-2'>
<table>
<thead>
<tr>
<th>#</th>
<th>Webサイト名</th>
<th>概要</th>
<th>URL</th>
</tr>
</thead>
<tbody>
<tr>
<th>1</th>
<td>株式会社MYNT</td>
<td>ユゲタの運営する会社</td>
<td><a href="https://myntinc.com" target="_blank">https://myntinc.com</a></td>
</tr>
<tr>
<th>2</th>
<td>Hackman Radio</td>
<td>ユゲタの配信している、プログラミングが学べるPodcastラジオ番組</td>
<td><a href="https://hackman.site/" target="_blank">https://hackman.site/</a></td>
</tr>
<tr>
<th>3</th>
<td>カンタンWeb</td>
<td>独自のホームページ構築についてまとめたサイト</td>
<td><a href="https://kantan-web.netlify.app/" target="_blank">https://kantan-web.netlify.app/</a></td>
</tr>
<tr>
<th>4</th>
<td>お仕事事例集</td>
<td>株式会社MYNTのお仕事事例集ページ</td>
<td><a href="https://mynt.work/" target="_blank">https://mynt.work/</a></td>
</tr>
<tr>
<th>5</th>
<td>SkillLand</td>
<td>プログラミング学習ができるゲームのモックアップ版</td>
<td><a href="https://skill-land.com/" target="_blank">https://skill-land.com/</a></td>
</tr>
<tr>
<th>６</th>
<td>ImageMagic</td>
<td>画像ファイルからアニメーションが作れる画期的なツール（無料で使えるよ）</td>
<td><a href="https://image-motion.mynt.work/" target="_blank">https://image-motion.mynt.work/</a></td>
</tr>
</tbody>
</table>
</div>
StyleSheet
div{
overflow:scroll;
}
table thead{
position:sticky;
top:0;
z-index:2;
}
table tbody th{
position:sticky;
left:0;
z-index:1;
}
table thead th:nth-of-type(1){
position: sticky;
left:0;
}
解説
まず、テーブル全体を "overflow:scroll" させているのは、最初のスクロールテーブルと同じ状態です。
ポイントは、 position:sticky; の箇所です。
スクロールさせたくないタグにこれを記述して、
上部固定であれば、"top:0"
左部固定であれば、"left:0"
をセットするだけで、簡単にスクロール固定することができます。
左上のセルは、コーナーセルなので、縦の場合も横の場合もこのしたい場合は、個別にセットしてもいいし、不要なら何も書かなくて大丈夫です。
あとがき
これ、まじで便利じゃないですか？
なんでこれまで書いてこなかったんだろう？
テーブル記述には必須にしてもいいぐらい簡単で確実な見え方だと思うんですよね。
現時点(2023年9月）で、対応ブラウザは以下のようになっています。
IEは論外として、ほぼ問題なさそうですね。
使ってさしあげましょう。
0 件のコメント:
コメントを投稿