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



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

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

名前番号データ1データ2データ2データ4
富山 一郎A012345671234567890123456789012345678901234567890
石川 花子ZX00000001234567890123456789012345678901234567890
福井 タカシQQQ99999991234567890123456789012345678901234567890

列を固定する

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

名前番号データ1データ2データ2データ4
富山 一郎A012345671234567890123456789012345678901234567890
石川 花子ZX00000001234567890123456789012345678901234567890
福井 タカシQQQ99999991234567890123456789012345678901234567890

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

背景色を指定

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

名前番号データ1データ2データ2データ4
富山 一郎A012345671234567890123456789012345678901234567890
石川 花子ZX00000001234567890123456789012345678901234567890
福井 タカシQQQ99999991234567890123456789012345678901234567890

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

Firefox で見たときの table

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

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

対策

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

名前番号データ1データ2データ2データ4
富山 一郎A012345671234567890123456789012345678901234567890
石川 花子ZX00000001234567890123456789012345678901234567890
福井 タカシQQQ99999991234567890123456789012345678901234567890

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


コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です