Bootstrap5でテーブルのヘッダを固定する方法

まず結論から書きますと、

<thead class="sticky-top">

theadタグに「sticky-top」というクラスを当てるだけ。たったこれだけです。

ネットでググった限り、一般的にはtheadではなくthタグにクラスを当てないと上手くいかない…という事例が多いようです。しかし、Bootstrap5ではその辺を上手いことやってくれてるのか？、theadにclass付けるだけで意図した通りに動作します。

ただし、そのままだとthead内の背景が透明なので、スクロールすると表の内容（trタグの中身）がthead内で透けて見えてしまいます。これを防ぐにはtheadにも背景色をつけてやります。背景カラーについてもBootstrapに標準で用意されているclassがありますので、自分でcssを書く必要がありません。

<thead class="sticky-top bg-white">

たとえば、こんな感じです。楽チンでいいですね。

※Bootstrap5.0.2で動作確認済みです。

※Windows版のChrome、Firefoxともに意図通りの動作となりました。しかしAndroid版のChromeおよびFirefoxではいずれもちょっと意図とは違う奇妙な動作となります（画面の幅やピンチイン・ピンチアウトの状態など、ある一定の条件では期待通りに動作しない）。iOS端末は持っていないので未確認です。