border-collapse:表(テーブル)に含まれるセル同士が隣接する辺の境界を共有するか分離するかを指定する
初期値 | separate |
適用対象 | table 、inline-table 要素 |
継承 | する |
アニメーション | 離散値 |
対応ブラウザ | caniuseで確認 |
border-collapseプロパティの説明
border-collapse
は、表(テーブル)に含まれるセル同士が隣接する辺の境界を共有するか分離するかを指定します。通常、表は複数のセルを並べた格子状のインターフェイスをしており、そのマス目を一つの単位とした時に、くっつけて並べるか、間隔を置いて並べるかを選択します。
このプロパティは、セルの親要素である表そのものに与えます。具体的にはHTMLの<table>
要素、あるいはCSSのdisplay
プロパティにtable
やinline-table
が指定されている要素に適用されます。
セル同士の間隔を調整する場合は、border-spacing
を追加して下さい。
border-collapseに指定できる値
- collapse
- 隣接するセル同士を密着させて境界を共有します。これが初期値です。
- separate
- 隣接するセル同士の間に間隔を空けて、個別に境界を持たせます。
border-collapseの使い方とサンプル
border-collapse
プロパティの構文は以下の通りです。
CSS
/* キーワード値 */
border-collapse: collapse;
border-collapse: separate;
/* グローバル値 */
border-collapse: inherit;
border-collapse: initial;
border-collapse: revert;
border-collapse: unset;
border-collapseの実例
それでは実際に簡単な例を見てみましょう。ここでは、共通のスタイルを持つ表を並べて、border-collapse
の値を変えた場合の挙動を確認します。
表示確認
CSS
.samp_box {
display: flex;
flex-direction: row;
flex-wrap: nowarp;
justify-content: space-between;
align-items: stretch;
gap: 1rem;
text-align: center;
}
.samp_box > div {
flex: 1;
}
.samp_box table {
width: 100%;
border: 3px dashed #ccc;
}
#table_1 > table {
border-collapse: collapse;
}
#table_2 > table {
border-collapse: separate;
}
table td {
border-top: 3px solid #fc605b;
border-right: 3px solid #fcc15b;
border-bottom: 3px solid #76fc5b;
border-left: 3px solid #5b96fc;
}
HTML
<section class="samp_box">
<div id="table_1">
<table>
<caption>collapse</caption>
<tr>
<td>td</td><td>td</td><td>td</td>
</tr>
<tr>
<td>td</td><td>td</td><td>td</td>
</tr>
<tr>
<td>td</td><td>td</td><td>td</td>
</tr>
</table>
</div>
<div id="table_2">
<table>
<caption>separate</caption>
<tr>
<td>td</td><td>td</td><td>td</td>
</tr>
<tr>
<td>td</td><td>td</td><td>td</td>
</tr>
<tr>
<td>td</td><td>td</td><td>td</td>
</tr>
</table>
</div>
</section>
セル同士の間隔を調整する場合は、border-spacing
を追加して下さい。上記の表にborder-spacing
プロパティを追加すると、以下のように表示されます。この値は、border-collapse
の値がseparate
でなければ無効となります。
CSS
#table_1 > table {
border-collapse: collapse;
border-spacing: 10px;
}
#table_2 > table {
border-collapse: separate;
border-spacing: 10px;
}
表示確認
border-collapseに関連するCSSプロパティ
テーブル(table)関連 | |
---|---|
border-collapse | 表のセル同士が隣接する境界線を共有するか分離するかを指定する |
border-spacing | 表に含まれるセル同士の間隔を指定する |
caption-side | 表(テーブル)のキャプションの位置を指定する |
empty-cells | 空白セルのボーダーの表示・非表示を指定する |
table-layout | 表(テーブル)のレイアウトに使用されるアルゴリズムを指定する |