【CSS】テーブルの隣接するセルの間隔を開けるborder-collapseの使い方

今回はHTMLで作ったテーブルの隣接するセルの感覚を開けるborder-collapseプロパティを紹介します。

 

border-collapseの使い方

HTMLで作ったテーブルの隣接するセル同士の感覚を開けたいと思ったときは、border-collapseプロパティを指定します。

指定は以下のように行います。

table.sample1 {
border: solid 1px #000000; 
border-collapse: collapse;
}

 

HTMLのtableタグに直接指定してしまってokです。

 

指定できる値

border-collapseに指定できる値は以下の2つです。

  • separete:テーブルのボーターは重なって表示される。初期値。
  • collapse:ボーダーが離れて表示される。

 

テーブルのセル同士の間隔を開けたいときは

border-collapse: collapse;

と指定しましょう。