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

製作 プログラム

最終更新日:2021/04/07

ラムネグから一言:寝る前に読むとくだらなすぎて逆に寝れると好評なすごい適当なブログをこっちではじめてます.

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

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

いきなり解決方法

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

なのでこうする。

<table>のcssに追加:

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;」の一行加えるだけ!で超カンタン解決しちゃいました。参考にしてくださいね。

【おしらせ、というか完全なる宣伝】

文体がもうぜんぜん適当すぎてあれだけどものすごい自由に書いてるブログ「檸檬だくだく」もよろしく.寝る前に読める恐ろしくくだらないやつです.

こんなにも一ミリも目を引かれないタイトルを取り扱ってます: カラシ水 / 傘を折りたくなるくらいの衝動 / 錦織選手とユニクロ /