border-collapseとは?基本的な使い方から値の指定方法まで徹底解説

テーブルセルのボーダーの表示の仕方を指定するborder-collapse

名前を聞いたことはあるけど、詳しい意味や使い方を知らない人も多いでしょう。

・border-collapseってどんなプロパティ?
・正しい使い方を知りたい・・・。
・セルのボーダーの間隔を調整するには、どうすればいい?

こんな悩みを抱えていませんか?

今回は、border-collapseの

・基本的な使い方
・border-collapseで値を指定する方法
・セルのボーダーの間隔を調整する方法

について説明します。

border-collapseとは

border-collapseとはどういったプロパティなのか、詳しく知らない人もいるでしょう。

なのでここでは、border-collapseの意味や役割について解説していきます。

border-collapseの読み方

border-collapseは「ボーダー・コラプス」と読みます。

「border」は「枠線・ボーダー」、「collapse」は「崩壊・落下・圧縮」という意味があります。

CSSでは、この「border-collapse」をボーダーの表示形式という意味で使われています。

例えば、表の中のセルのボーダーを重ねて表示したり、間隔をあけて表示したりするときに、使われることが多いです。

border-collapseはテーブルセルのボーダーの表示の仕方を指定するプロパティ

border-collapseはテーブルセルのボーダーの表示の仕方を指定するプロパティです。

border-collapseを指定することで、セルのボーダーの表示の仕方を変更することができます。

例えば、値をcollapseと指定すれば、セルのボーダーは重なって表示され、値をseparateと指定すれば、セルのボーダーは間隔をあけて表示されます。

border-collapseで利用できる値

border-collapseでは以下の値を使うことができます。

説明
collapse 隣接するセルで境界線を共有します (collapsed-border 表レンダリングモデル)。
separate 隣接するセルが個別に境界線を持ちます (separated-border 表レンダリングモデル)。

対応ブラウザ

対応ブラウザは以下の通りです。

PC用ブラウザ 対応状況
Chrome 完全対応
Edge 完全対応
Firefox 完全対応
Internet Explorer 完全対応
Opera 完全対応
Safari 完全対応
スマートフォン用ブラウザ 対応状況
Android webview 完全対応
Android版Chrome 完全対応
Android版Firefox 完全対応
Android 版 Opera 完全対応
iOS版Safari 完全対応
Samsung Internet 完全対応

border-collapseの基本的な使い方

border-collapseの意味や役割についてわかりました。

なのでここでは、実際にborder-collapseの使い方を解説していきます。

border-collapseの使い方

border-collapseを使うときは、border-collapse: 〇〇;と指定します。(〇〇には値名が入ります)

実際の使い方をコードで見ていきましょう。

例として、tableタグで簡単な表を作ります。

そして、そのtableに「border-collapse: collapse;」と指定してみましょう。

結果は次のように表示されます。

表のセルのボーダーが1本に重なって表示されていますね。

このように、border-collapseで値をcollapseと指定すると、セルのボーダーが1本線になります。

よく使われる値なので、使い方を覚えておきましょう。

値にseparateを指定して間隔をあける

border-collapseで指定できる値は、collapse以外にseparateというものもあります。

separateを指定することで、セルのボーダーの間隔をあけることが可能になります。

実際に指定方法をコードで見ていきましょう。

例として、tableタグで簡単な表を作成します。

そして、そのtableに「border-collapse: separate;」と指定してみましょう。

すると、結果は次のように表示されます。

セルのボーダーが間隔をあけて表示されていますね。

このように、border-collapseでcollapseを指定すればボーダーは重なって1本線として表示され、separateを指定すればボーダーは間隔をあけて表示されます。

それぞれの値を使い分けることで、表のボーダーの表示方法を変更することができるので、使い方を覚えておきましょう。

セルのボーダーの間隔を調整する方法

ここまでで、border-collapseの基本的な使い方がわかりました。

なのでここからは、border-collapseでseparateと指定したときに、セルのボーダーの間隔を調整する方法を解説していきます。

セルのボーダーの間隔を調整するには、border-spacingというプロパティを使います。

MEMO
border-spacingは、セルのボーダーの間隔を指定するプロパティで、border-collapseの値がseparateのときだけ有効になります。
指定できる値は、pxやemなどを用いた数値です。

border-spacingでボーダーの間隔を調整する方法を、実際のコードで見ていきましょう。

例として、tableタグを使って簡単な表を作成します。

そして、そのtableに「border-collapse: separate;」と指定してみましょう。

今回は、試しにセルのボーダーの間隔を10pxにしてみたいので、「border-spacing: 10px;」と指定します。

結果を表示すると、次のようになります。

表のセルのボーダーの間隔が10pxになっていますね。

このように、border-spacingを使えばボーダーの間隔を簡単に調整することができます。

もし、ボーダーの間隔を上下・左右に分けて指定したい場合は、「border-spacing: [左右] [上下];」の順に記述することが可能です。

なので、使い方を覚えておくといいでしょう。

まとめ

今回は、border-collapseの意味や使い方について徹底解説しました。

border-collapseは、テーブルセルのボーダーの表示の仕方を指定するプロパティです。

表の中のボーダーを重ねて表示させたり、間隔をあけて表示させたりすることができるので、使い方を覚えておくといいでしょう。

この記事がborder-collapseの学習に役立つと幸いです。

参考文献:MDN web docs|border-collapse – CSS:カスケーディングスタイルシート