スクロールするテーブル(bootstrap 5.3)

bootstrap 5.3 を使ったスクロールするテーブル。

thead に position: sticky を指定して thead を固定するやり方はいろいろ解説があるが、少なくとも chromium の現在のバージョンでは親要素と table 要素の間に微妙な隙間ができてしまい、スクロールすると thead の上に tbody の中身が表示されてしまう。
まあ 1px 程度なので無視することもできるがさすがに気になる。

なのでこの隙間を隠すために

                    <div class="position-sticky w-100 scrollable-table-shim">
                    </div>

のようにダミーの要素を配置する。

あとは枠線が二重になるのを margin: -1px とかで隠したりする。