kooh-q-hook

いわゆる一つの技術メモ

CSS で translate 対象とするth要素に border を設定する時の注意

table 要素のヘッダーを固定化する方法は色々ありますが、
th 要素に transform: translateY を動的に指定する方法がシンプルで使いやすいと思います。

Freezing of the SharePoint List/Library header · GitHub

この方法で固定化を実現した th 要素に border を設定する場合、
border-collapse に collapsed を指定すると、スクロール時に th の border は表示されません。

border は隣接セル同士で共有される(各セルでは保持しない)ため、
translateY で 各 th 要素の表示位置をずらしても追随しないというのが理由です。

html - combination of border-collapse:collapse and transform:translate - Stack Overflow

この条件に当てはまる場合には、border-collapse は separate とする必要があります。
つまり border も左端・右端・それ以外で、それぞれスタイルを指定します。

border-collapse の思わぬ落とし穴でした。