cssでtableにborderつけると一部に線がつかない問題

cssで<table>にborderをつけるとなんか一部分だけ線がつかない！けっこうニッチだけどほかにも同じ問題で悩んでる人がいる…はず。

ぼく自身もこれで詰まっちゃいました。ということでここではcssで<table>にborderつけるときの一部罫線欠けちゃう問題の解決方法を紹介したい。

いきなり解決方法

これは<table>に対して設定したボーダーが<table>の中にある<th>、<td>のせいで重なっちゃって消えてるのが問題。

なのでこうする。

border-collapse: separate;

これだけで欠けちゃってた線がちゃんと表示されるようになります。

border-collapseとは

border-collapseとはなんぞや、という話を最後にさくっと。

border-collapseは値に「collapse」と「separate」を取ることができて初期値は「separate」。

ただreset.cssなんかを使ってる場合だとこのreset.cssの中で「border-collapse:collapse;」が設定されてる場合が多い。

• separate：線と線が重ならない設定。thとかtdに線を設定するとダブって見える
• collapse：線と線が重なる設定。thとかtdに線を設定してもきれいに表示される

ふむふむ。つまり<table>の中にある<th>、<td>にcssでborder設定するなら「collapse」の方がよくって、<table>に対してcssでborder設定するなら「separate」にする、って感じ。

まとめ

cssでtableにborderつけると一部の線が消えちゃう、表示されない問題の解決方法を書きました。

結局「border-collapse: separate;」の一行加えるだけ！で超カンタン解決しちゃいました。参考にしてくださいね。