【備忘録】簡単！横スクロール出来るテーブルの見出しを固定する方法

こんにちは MaromaroのTakaです。 タイトルの「横スクロール出来るテーブルの見出しを固定する方法」ですが、 見出しを固定というより追従してくるといった表現の方が分かりやすいかもしれません。 今回それをHTML・CSSで対応します。 例えば↓のような標準的なテーブルタグで組まれた、要素が横に広く横スクロールを使わざるを得ない表があります。

See the Pen bGqjvWb by 佐々木 貴徳 (@whxwrxyj) on CodePen.

横にスクロールすると見出しが見えなくなり、 とても表が見づらいですね。 そこで見出しタグ（th）に下記のCSSを当ててみましょう。

th{
  position:sticky;
  left:0;
  background-color:#fff;
}

position:stickyとleft:0を指定するだけで追従するようになります。 background-colorについては適宜変更してください。 position:stickyは下記の通りIE・Opera mini以外のブラウザは対応しています。（赤くなっているのはサポートされていない） IEに関してはもうサポートも切れてますので正直対応はしなくては良いと個人的には思います。 どうしてもということであれば、 「stickyfill」（プラグイン）で対応自体は可能となっています。   実際に見出しを固定させたものが↓になります。

See the Pen ExWeXew by 佐々木 貴徳 (@whxwrxyj) on CodePen.

いかがでしたでしょうか。 とても簡単に見やすくなったと思います。 position:stickyに関してはIEに対応していないのが少しネックではありますが、 stickyが効かなくても表示がおかしくなるということはないので、 特に問題はないとは思います。（プラグインで対応も可能ですので） stickyだけではなく他にもIEで対応していないものなどがありますので、 そういったものを有効活用していけばより簡単に良いサイトが作れるのではないのかと思います。 ※IEを切り捨てればの話ですが…..

以上Takaでした。