tableの罫線が重なって表示されない？表示させるCSSプロパティを紹介します。

シンプルなテーブルのコーディングに悩まされている人

こんにちは、フロントエンド・エンジニアしんぺーです。
今回は、自分自身が思わぬところで困ったコーディングがあったので、その解法を共有したいと思います。
え？こんな簡単なコーディングで？と思うかもしれませんが、意外と難しく僕はドハマリしてしまいました。

完成形のイメージ

See the Pen
table01 by shimpei (@shimpei)
on CodePen.

上にも画像を貼り付けましたが、コードも見れるのでCodePenで改めて完成形のイメージです。

至極シンプルなのですが、なかなか難しいので答えを見る前に実際にコーディングしてチャレンジしてみて下さい。

線の太さは1px。外枠が黒色、内側が灰色です。

結論

まず外枠の黒線は、border: 1px solid #000;でOKです。
内側の罫線も同様に、th,tdにborder: 1px solid #dddです。

最後に、border-spacing: 0px;を記述して完了です！

ここから先は解説になりますので、解決した方で解説が必要ない方はこれ以上読まなくても大丈夫です。
当ブログを読んで頂きありがとうございました！

では、もう少し気になる方向けに解説します。

解説

border-spacing: 0px;ってなに？

これ何をしているかと言うと、ボーター間の空きを0pxで無しにしています。

border-spacingはボーダーの間隔を指定するもので、通常は「5px」など数値と単位で間隔を指定するものです。

その間隔を今回は「0px」に指定しています。
こちら本来「0px」にするのであれば、border-collapse: collapse;と指定するのが正しいコーディングです。

間隔をなくしたいので、border-collapse: collapse;を指定すればいいのですが、コレをすると何とも不思議なことが起こります。

面白いですよ。

border-collapse: collapse;を指定するとどうなるか？

なんと！外側の黒線が消えてしまいます。

さらに不思議なのが、th,tdのボーダーをsolid意外のdashedやdottedにすると黒線が復活します。

ますます分からない、、、
ちなみに、外側の線の太さを「1.1px」にするとchromeのみ黒線が復活します。

整理します。border-collapse: collapse;にすると

• 外側の黒線が消える
• th,tdのボーダーがdashedやdottedの時は、外側の黒線は消えない
• 外側の黒線の太さをth,tdより太くした場合は問題なく表示される

なので、border-collapse: separate;で間隔を空けた上で、間隔を0pxに指定して無理やり間隔を詰めるということをしています。
そうすると上手く表示されました。

最後に

今回ご紹介したハック的な方法、ちょっと良くないなと思っています。
もっといい方法があるよとか、こんなやり方もあるよとか知っていましたら是非、ご教授ください。

では、最後まで読んで頂きありがとうございました。