table 見出しを固定してスクロール

tableの表などで下に長くなる程、見出しの確認などが大変になり、いちいち上まで戻って確認しなければいけないなど、
ユーザー視点からすると、使いにくい表示方法となってしまいます。

そんな時、見出しの部分さえ固定して、項目のみスクロールできるようにしてしまえば、見出しを見ながらすべての項目を見ることができるので、
table自体をスクロールさせるのも有効な手段です。

スマートフォン対応を考えていなかった場合でも、スクロール形式にすることで、少しは見やすく表示させることは可能です。

table 見出しを固定してスクロールさせるためには、
下記のように見出しの部分をthead要素内に記述し、tbodyと分離しておきます。

また、cssにはtbody自体に、スクロールできるようdisplay:block;を指定します。

thead, tbody {
  display: block;
}
tbody {
  overflow-x: hidden;
  overflow-y: scroll;
  height: 200px;
}

tableの表示の仕方などは、項目数やPC表示、スマートフォン表示で大きく変わるので難しいものです、なので環境に応じた、最適なテーブルのデザインの設計が大切ですね。