前回 (https://qiita.com/okadabasso/items/a5d3dbe581307da37988) やったやつの修正版。
flex を使いすぎなのと無駄なスタイルが多かったので整理した。特に "scrollable-table-shim" とか不要になった。
要点
- body 以下、無駄に
d-flexにしていたのを削除した - main 直下(たいていのテンプレートエンジンで個別ページのコンテンツを書く部分) に
d-flex flex-columnを指定し、スタイルにheight: calc(100vh - 5rem);を追加して main の高さを固定する -
.scrollable-containerにoverflow-y-autoを指定する - scrollable-table-shim は不要なので削除する
-
.scrollable-container theadにはtop: -1pxを指定してスクロールしたときに見えてしまう隙間を消す
他に、 最初の列に position: sticky; left: 0 を指定して横スクロールが発生したときに最初の列だけはスクロールしないようにした。