WWGスペース 名古屋のホームページ制作会社が発信するオウンドメディア 無限の情報が集う星

ホームページ制作のお仕事をしているとほぼ間違いなくページ内に実装することになるテーブル表。

製品の比較表や料金プランの一覧など、データを整理して伝えたい場面で重宝されます。

一方でデータ量が多すぎると横や縦にスクロールする必要があり、今見ているデータがどの見出しに対応しているのかが分かりづらくなることがあります。

そんなときには、CSSで見出しセルの列と行を固定します。そうすることにより、スクロール中でも見出しセルが常に表示され、今見ているデータがどの列や行に該当するのかを一目で把握できるようになります。

早速見出しセルを固定する方法を見ていきましょう。

見出しセルを固定する

今回は横にスクロールが必要な横長のテーブルで見ていきたいと思います。

固定させたいのは一番左にある『商品ID』『001』『002』のところになるわけですね。

これらの見出しセルにposition: sticky;を設定することで横にスクロールしたとしても、途中で見出しセルを見失うことなく項目を見ることができるようになります。

position: sticky;とは今回のケースから端的に説明するならば、固定させたい要素に設定することでテーブル内であればずっと追従してくれるようにしてくれるものです。

たった一行CSSを追加するだけで簡単に見出しセルを固定することができるわけですね。

ただし、position: sticky;を設定する際には

• 親要素の高さを指定する
• 固定させたい要素のポジションに少なくともtopは指定する。

などの条件がございますのでご注意ください。

仕上げで見栄えを良くする

ここまでで完成としても良いのですが、見栄えを良くするために最後の調整が必要です。

先程例示したテーブルを横にスクロールしてみると右から左に過ぎていくセルたちが見え隠れしてしまっているのがわかるかと思います。

ちょっと見た目が綺麗ではないですよね。

最後の仕上げで後ろがやたらと見え隠れしてしまっているのをなくしていきます。

方法としては、position: sticky;を設定した要素に疑似要素を作り、その疑似要素に左右のボーダーを設定してあげることで見え隠れしないようになります。

コードは以下の通りです。

.sticky-left:before {
 content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-left: 1px solid #ccc;
  border-right: 1px solid #ccc;
  background-color: #f9f9f9;
  z-index: -1;
        }

ポイントとしては、

• 左右のボーダーを設定。（これがあるおかげで見え隠れしなくなる。）
• topやleftなどのポジションは当然指定してあげる。
• 高さ、横幅は親要素と同じになるように100%に設定。
• 親要素のより下に位置するようにz-indexを設定。

といった感じです。

また、元々は親要素である固定させたセルに左右のボーダーを持たせていたのですが、疑似要素の方にボーダーを持たせたため、必要がなくなったのでnoneを設定してなくしておきます。

これでスクロールした時にテーブルの左端で後ろのセルが見え隠れしなくなり見た目が綺麗になりました！これで完成ですね。

データの数が多いテーブルを作る際にはマストになるような作業かと思いますので是非マスターしていきたいですね！

参考

【CSS】tableの行（列）を『sticky』で固定したときにスクロールしても線が消えないようにしてみる
https://125naroom.com/web/3816