POSTED | 2023.01.05

chrome・Edgeでtableのborderの太さが均一にならない問題の解決方法

WWEBのこと

WRITER : Sasayama Sayaka

chrome・Edgeでtableのborderの太さが均一にならない問題の解決方法

美術館と美味しいものが大好きなクリエイター

プロフィールを見る

chrome・Edgeのブラウザでtableの太さが、均一を指定しているにも関わらず
バラバラになってしまう現象（おそらく不具合）が発生します。

これは2023/1/4現在のchromeの最新バージョンでも発生します。
今回はこの問題の回避方法をご紹介します。

※誤った記述がありましたので一部修正してあります。

問題の現象とcssの記述

この問題はtableのborder-collapseをcollapseにして、trにborderを設定すると発生します。

私が確認できる範囲ではパソコンのchromeとEdgeのブラウザで発生して、firefoxでは発生しませんでした。

.table_1 {

	border-collapse: collapse;

	tr{border-bottom: 1px solid #000;}

	th {}

	td {}

}

問題を回避するcssの記述

tableのborder-collapseをseparateにして、trにborderを設定せずにth、tdにborderを設定すると
chrome、Edgeでもborderが問題なく均一に表示されます。

.table_2 {

	border-collapse: separate;

	th {border-bottom: 1px solid #000;}

	td {border-bottom: 1px solid #000;}

}

border-collapse:separateとborder-collapse:collapseについて

collapseは隣接するボーダーラインを重ねあわせて表示するようにし、
separateは隣接するボーダーラインを離して表示するよう指定します。
初期値は「separate」です。
border-collapse:collapseにすることでtrにborderを設定することが可能となりますが、
上記の通り太さがバラバラに見える問題が発生する可能性があります。