[CSS] table の列固定に position: sticky を使用して背景色を指定すると、枠線が消えてしまう

横スクロールするテーブルについての話です。

横スクロールのテーブルの例

列を固定する

列を固定するために、css で position: sticky; を使う方法があります。このときは left: 0; も一緒に指定する必要があります。

しかし上のデモのように、固定した列の背景が透けてしまいます。横スクロールすると文字が重なってしまいます。

背景色を指定

そこで、td 要素に背景を指定してみます。

すると、背景は透けなくなったので文字は重ならなくなりましたが、今度は枠線が消えてしまいました。ブラウザによっては表示されますが、Firefox ではこの現象が発生します。

Firefox 77 で表示したときのスクリーンショット。固定した列のボーダーが消えてしまう

これはborder-collapse: collapse; を指定しているときに発生します。枠線が collapse だとセルの枠線は統合されて table 側に所属することになります。そして position: sticky; を指定された要素（1列目のセル）は table の上に独立して浮いているような状態になるため、ボーダーが見えなくなってしまうのです。

対策

簡単な対策方法としては、セルの背景色で塗る範囲を background-clip: padding-box; で小さくしてやることです。通常はボーダーの範囲まで塗っていますが、ボーダーの内側だけを塗るという意味になります。

これで枠線も見えるようになりました。 Bootstrap のテーブルでもこのテクニックは有効です。