見出しセル（th）をposition: stickyで固定して、テーブルレイアウトのレスポンシブ対応をしようという記事です。

HafHというウェブサイトの下記ページ「プラン比較」の部分にインスパイアを受けました。これをテーブルレイアウトでできないものかと思い、本記事を書いています。

書いたコード

以下はCodePenのリンクです。

本記事で作成するテーブルレイアウト

今回は以下のようなレイアウトをつくります。

画面幅の狭いデバイス向けに、テーブルを横スクロール可能にします。

.table {
  display: block;
  overflow-x: scroll;
  white-space: nowrap;
}

横スクロールしたときに、特定のセルのみ常に同じ位置に置けるようにします。今回は、tbody内の見出しセルがその対象になります。

.table tbody th {
  display: block;
  position: sticky;
  left: 0;
}

下記は未解決です。。

もともと、以下のようなCSSを設定していました。しかしながらこれだと、1列目は見出しセル以外のセルも同じ長さになってしまいます。表示は崩れてこそいませんが、他セルに横幅の影響が及んでほしくありません。

.table tbody th {
  width: calc(100vw - 16px);
}

見出しセルをposition: stickyで固定して、テーブルレイアウトのレスポンシブ対応をしてみました。実務で使うには、スタイルをちゃんと設定しないといけないですが、ひとまず最小限の形にはできたんじゃないかと思います。