今まで知らなかったので、備忘録としてまとめ。
HTML の <table> タグでテーブルを作成した際、セルとセルの間に 1px ほどの謎の隙間ができてしまったので、それを無くす方法についてです。
最初は border が何か悪さをしているのかと思い、border: none; を指定しましたが、それでは解決できませんでした。
今回参考にさせていただいた記事はこちら。
テーブルのセルの隙間をリセットするCSS – Qiita
https://qiita.com/macer_fkm/items/bac56f0f863a19cfd674
こちらの記事によると、border-collapse と border-spacing プロパティを指定する必要があるとのことでした。
サンプルコードは下記のとおりです。
<table> <tr><th>見出し1</th><td>詳細1</td></tr> <tr><th>見出し2</th><td>詳細2</td></tr> <tr><th>見出し3</th><td>詳細3</td></tr> </table>
table {
border-collapse: collapse;
border-spacing: 0;
}
サンプルの HTML に対し、上記のように CSS を指定すると、セル間の隙間がなくなりました！
普段はあまり気にしたことがなかったのですが、今回テーブルに背景色を付けたらこの隙間が見えるようになり発覚しました。
細かいことかもしれませんが、やはり見た目に関わるので解決できてよかったです。
以上、HTML の <table> のセルの隙間を無くす方法でした。
ご参考になれば幸いです。
