CSSでテーブルのヘッダや一部を固定してスクロールさせる方法！
CSSでテーブルのヘッダや一部を固定してスクロールさせる方法について解説します。テーブルの一部を固定してスクロールさせることでテーブル自体を見やすくすることが出来ます。またテーブルのコードの書き方についても簡単に説明します。
テーブルのヘッダや一部を固定してスクロールさせたい
テーブルのヘッダや一部を固定してスクロールさせることでテーブル自体を見やすくすることができ、さらにレスポンシブにも簡単に対応することができるため、ユーザビリティを向上させることができます。
ではテーブルのヘッダや一部を固定してスクロールさせたい時、どうすればいいのかについてCSSを用いて説明していきます。
まず初めにテーブルについてHTMLではどのようにコードを書くのか簡単に確認してみましょう。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<table>
<thead>
<tr>
<th>タイトル</th>
<th>タイトル</th>
<th>タイトル</th>
</tr>
</thead>
<tbody>
<tr>
<td>内容</td>
<td>内容</td>
<td>内容</td>
</tr>
</tbody>
</table>
</body>
</html>このように基本はまず全体を<table>で囲み、テーブルのヘッダを<thead>で囲み、その内容を<tbody>で囲みます。またthead内では<th>を、tbody内では<td>を用います。
こうすることで、ヘッダ部分を太文字で表すことができ、見やすくなります。
CSSでテーブルのヘッダや一部を固定してスクロールさせる方法
それでは順番にCSSでテーブルのヘッダや一部を固定してスクロールさせる方法について解説していきます。
ヘッダ（横軸）を固定して縦にスクロールする方法
それではまずテーブルのヘッダ（横軸）を固定してスクロールさせる方法について解説します。
まずHTML側でtableタグをdivタグで囲みます。
そしてCSSでそのdivタグの要素にoverflowをscrollとします。こうすることで、はみ出た幅分が隠れ、スクロールにより表示することができるようになります。
次にth要素にpositionプロパティをsticky、topを0とします。こうすることで、ヘッダ（横軸）を固定位置になるように定義でき、スクロールダウンすると常に一番上に固定されるように実装できます。
また、z-indexプロパティを1とすることで、tbody要素内のセルよりも手前に表示することができます。
以上がヘッダ（横軸）を固定してスクロールさせる方法となります。
ではサンプルコードで実際の挙動を見てみましょう。
このようにヘッダ（横軸）部分が固定され縦にスクロールしていることが分かります。
縦軸を固定して横にスクロールする方法
ここでは1列目を固定してスクロールする場合について解説します。
1列目なので、thの1つ目の要素にpositionをsticky、そしてleftを0とします。
またz-indexを1とし、ヘッダ行内の他のセルより手前に表示させます。
以上が縦軸を固定してスクロールする方法となります。
では実際にサンプルコードを用いて挙動を見てみましょう。
このように1列目が固定されてスクロールされていることが分かります。
もし2列目を固定したい場合はCSSでthに疑似要素のnth-childをつけてこのようになります。
このように固定したい列によって、nth-childを用いて適宜調整していただけたらと思います。
まとめ
レスポンシブデザインが求められている現在において、ここで紹介したCSSでテーブルのヘッダや一部を固定してスクロールさせる方法はとても役に立ちます。
ぜひ使ってみてください。
