[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 のテーブルでもこのテクニックは有効です。

ITエンジニア募集中！

キュアコード株式会社はITエンジニアを募集しております。少人数の職場なので、上流・下流やサーバー・クライアント対応の垣根なく、あなたの強みを活かしながら いろいろなことにチャレンジ可能です。エンジニアとしての未経験の方、経験が少ない方も歓迎しています。

下記よりITエンジニア募集の採用情報をご覧いただけます。