テーブルの一部を固定し、スクロールバーを出す

CSSのみでの実装をしました。
実装にあたり下記サイトを参考にさせていただきました。
https://since-inc.jp/blog/8675
https://www.rectus.co.jp/archives/2371

border-collapse: collapse;が反映されない

テーブルの一部を固定しスクロールバーを出したところ、枠線が二重になりborder-collapse: collapse;が反映されていないように見えました。
間違いなく書いているはずなのにおかしい...

解決方法

原因は、自ら実装したreset.cssのbox-sizing: inherit;（親要素のborder-boxの値を引き継ぐ）でした。（知らないうちに親要素にbox-sizing: border-box;が含まれていたんだと思います。）

.fixed{
      &:before{
            content: "";
            position: absolute;
            top: -1px;
            left: -1px;
            width: 100%;
            height: 100%;
            border: 1px solid #333;
            box-sizing: content-box; #ここを追記
       }     
}

paddingとborderを幅と高さに含めないbox-sizing: content-box;を記述することで枠線が１本になり、思い通りのデザインにすることができました！！