浜松のWEBシステム開発・スマートフォンアプリ開発・RTK-GNSS関連の開発はお任せください
株式会社シーポイントラボ
TEL:053-543-9889
営業時間:9:00~18:00(月〜金)
住所:静岡県浜松市中区富塚町1933-1 佐鳴湖パークタウンサウス2F

【CSS】tableのセルのわずかな隙間をなくす方法

今まで知らなかったので、備忘録としてまとめ。
HTML の <table> タグでテーブルを作成した際、セルとセルの間に 1px ほどの謎の隙間ができてしまったので、それを無くす方法についてです。
最初は border が何か悪さをしているのかと思い、border: none; を指定しましたが、それでは解決できませんでした。

今回参考にさせていただいた記事はこちら。

テーブルのセルの隙間をリセットするCSS – Qiita
https://qiita.com/macer_fkm/items/bac56f0f863a19cfd674

 

こちらの記事によると、border-collapseborder-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> のセルの隙間を無くす方法でした。
ご参考になれば幸いです。

  • この記事いいね! (0)