[css] tableタグのstickyでborderが隠れる状態の回避方法

帳票システムなどを作る時に、HTMLでは必ず使用するTableタグ。 position:sticky機能が使える様になってから、ヘッダや見出しのスクロール固定ができるようになり、非常に便利に使っています。 でも、Tableのセルにborderがセットされていると、色々な不具合が生じるため、自分がやっているその回避方法について解説したいと思います。

borderが隠れる症状

普通にセルにborderを書いた状態でのtableの状態がコチラ。 ヘッダ部分のborderラインがスクロールすると、消えてしまうのがわかります。

Amazon売れ筋ランキング 2025年1月 : 周辺機器

※値段は、2025/1/8時点の表示です。 ざっくりとcssを抜き出すとこんな感じ。 .wrap{ overflow:scroll; width:100%; height:300px; position:relative; } .wrap table{ border-collapse:collapse; } .wrap table tr:nth-of-type(1){ position:sticky; top:0; left:0; } いろんなサイトに、"border-collapse:collapse;" コイツが原因と書かれているので、 "border-collapse:separate;" に変更してみる。

Amazon売れ筋ランキング 2025年1月 : ノートパソコン

※値段は、2025/1/8時点の表示です。 .wrap table{ border-collapse:separate; border-spacing:0; } .wrap table th, .wrap table td{ border:1px solid black; } この状態だと、セルが隣り合っている箇所がborderが 1px + 1px = 2px になってしまいます。

対応仮説

borderを表示する箇所を特定（上と左だけ）に限定して、最下段のみ下、一番右のセルのみ右、にborderを表示すると、いい感じになるはずです。

Amazon売れ筋ランキング 2025年1月 : 家電＆カメラ

※値段は、2025/1/8時点の表示です。 .wrap table tr:nth-of-type(1){ position:sticky; top:0; left:0; } .wrap table{ border-collapse:separate; border-spacing:0; } .wrap table th, .wrap table td{ border-color:black; border-style : solid; border-top-width:black; border-left-width:black; border-bottom-width:0px; border-right-width:0px; } .wrap table tr:last-child{ border-bottom-width:1px; } .wrap table td:last-child{ border-right-width:1px; } この状態だと、stickyの下部のborderラインが消えてしまいますね。 もうちょっと改良してみましょう。

最終対応方法

Amazon売れ筋ランキング 2025年1月 : DIY・工具・ガーデン

※値段は、2025/1/8時点の表示です。 .wrap table tr:nth-of-type(1){ position:sticky; top:0; left:0; } .wrap table{ border-collapse:separate; border-spacing:0; } .wrap table th, .wrap table td{ border-color:black; border-style : solid; border-top-width:black; border-left-width:black; border-bottom-width:0px; border-right-width:0px; } .wrap table tr:first-child th{ border-bottom-width:1px; } .wrap table tr:first-child + * td{ border-top-width:0px; } .wrap table tr:last-child{ border-bottom-width:1px; } .wrap table td:last-child{ border-right-width:1px; }

縦横対応

最後に、トップメニューだけじゃなく、サイドのナンバリングに関しても、sticky対応してみたいと思います。

Amazon売れ筋ランキング 2025年1月 : スポーツ＆アウトドア

※値段は、2025/1/8時点の表示です。 .wrap table tr:nth-of-type(1){ position:sticky; top:0; left:0; z-index:3; } .wrap table tr > *:first-child{ position:sticky; left:0; z-index:2; } .wrap table{ border-collapse:separate; border-spacing:0; } .wrap table th, .wrap table td{ border-color:black; border-style : solid; border-top-width:black; border-left-width:black; border-bottom-width:0px; border-right-width:0px; } .wrap table tr:first-child th{ border-bottom-width:1px; } .wrap table tr:first-child + * th, .wrap table tr:first-child + * td{ border-top-width:0px; } .wrap table tr > *:first-child{ border-right-width:1px; } .wrap table tr > *:first-child + *{ border-left-width:0px; } .wrap table tr:last-child{ border-bottom-width:1px; } .wrap table td:last-child{ border-right-width:1px; } 非常に長いコードになってしまいましたが、この書き方をコピペするのではなく、table内のセルのどの部分のborderを表示して、どこを非表示にするかをイメージできれば、それに適した書き方をするのがいいと思います。

あとがき

今回のsticky対応のborder表示をcssで行った場合、tableのリスト項目をjavascriptで絞り込みする様なシステムにおいて、思った様にborderの表示ができない場合があります。 classやattributeなどを駆使して、cssのselectorをうまく使いこなす必要があるので、この辺はコーダースキルが求められる点だと思います。 これが理解できない人は、今一度cssについて基礎学習をしてみることをオススメします。 意外とcssって奥深いんですよね。