CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSのborder-collapse:collapseとborder-collapse:separateの違いを徹底解説

border-collapseプロパティとは

border-collapseは、HTMLテーブルのセル同士の境界線（ボーダー）をどのように表示するかを指定するCSSプロパティです。主な値には「collapse」と「separate」の2種類があり、それぞれテーブルの見た目が大きく変わります。

  • collapse： 隣接するセル同士の境界線を結合し、1本の線として表示します。すっきりとしたデザインのテーブルを作成したい場合に適しています。
  • separate： 各セルの境界線を個別に分離して表示します。セル間に隙間ができ、ボーダーが重ならないため、格子状のレトロなテーブルスタイルになります。

collapseとseparateの違い

以下の画像は、collapseとseparateの違いを視覚的に示しています。border-collapseプロパティのseparate値を指定すると、各セルの境界線が分離されて表示されます。

CSSのborder-collapse:collapseとborder-collapse:separateの違いを徹底解説

サンプルコード

次のコードを実行すると、border-collapseのseparate値とcollapse値の違いを実際に確認できます。

<html>
   <head>
      <style>
         table.one {
            border-collapse:collapse;
         }
         table.two {
            border-collapse:separate;
         }
         td.a {
            border-style:dotted;
            border-width:2px;
            border-color:#000000;
            padding: 20px;
         }
         td.b {
            border-style:solid;
            border-width:2px;
            border-color:#333333;
            padding:20px;
         }
      </style>
   </head>
   <body>
      <table class = "one">
         <caption>Border Collapse</caption>
         <tr><td class = "a"> India</td></tr>
         <tr><td class = "b"> Australia</td></tr>
      </table>
      <br />
      <table class = "two">
         <caption>Border Separate</caption>
         <tr><td class = "a"> India</td></tr>
         <tr><td class = "b"> Australia</td></tr>
      </table>
   </body>
</html>

コードのポイント

このサンプルでは、2つのテーブルを用意して挙動を比較しています。

  • table.one（collapse）： border-collapse:collapse;を適用しているため、点線（dotted）と実線（solid）のボーダーが隣接しても1本にまとまって表示されます。
  • table.two（separate）： border-collapse:separate;を適用しているため、各セルのボーダーが独立して描画され、セル間に隙間が生まれます。

なお、separateを使用する場合は、border-spacingプロパティを組み合わせることで、セル間の間隔を自由に調整できるのも特徴です。モダンなWebデザインではcollapseが使われることが多いですが、用途に応じて使い分けるとよいでしょう。

  1. 【CSS入門】display:noneとvisibility:hiddenの違いを徹底解説！使い分けのポイント

    CSSでは、visibilityプロパティとdisplayプロパティを使って、HTMLドキュメント内の要素を非表示にすることができます。一見すると、どちらのプロパティを使っても見た目は同じように思えるかもしれませんが、実は両者には重要な違いがあります。 display: none と visibility: hidden の基本的な違い display: none — 要素そのものがドキュメント上にレンダリングされず、領域（スペース）も一切確保されません。要素が最初から存在しなかったかのような挙動になります。 visibility: hidden — 要素はドキュメント上にレンダリングされ、

  2. CSSの疑似クラスと疑似要素の違いを徹底解説！コロンの数と使い分けのポイント

    CSSには「疑似クラス」と「疑似要素」という、名前がよく似た2つの機能があります。どちらもセレクターを拡張する仕組みですが、役割や書き方が異なります。本記事では、両者の違いをサンプルコード付きでわかりやすく解説します。 疑似クラス（Pseudo-Class）とは 疑似クラスは、:hover、:active、:last-childのように、セレクターの「状態」や「条件」を表すものです。マウスオーバー時のスタイル変更など、要素が特定の状態にあるときの見た目を制御できます。 疑似クラスはコロン1つ（:）で始まります。 CSS疑似クラスの基本構文は以下のとおりです。 :pseudo-class {