ウェブランサー

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

対応ブラウザ
IE7対応IE8対応Firefox対応Chrome対応Opera対応Safari対応
適用対象 テーブル要素、インラインテーブル要素
継承 する

border-collapseプロパティは、table(表)のセルの周囲に指定した、ボーダーとボーダーの隣接した部分をどう表示するかを指定する事が出来ます。

border-collapseに与えられる値

border-collapse: collapse;
隣接するセルのボーダーを重ねて表示します。
border-collapse: separate;
隣接するセルのボーダーを間隔をあけて表示します。

border-collapseの使用サンプル

CSS
.table_sample01 {
 border-collapse: collapse;
 border: 1px solid #FF9900;
 margin: 0px 0px 10px 0px;
}
.table_sample02 {
 border-collapse: separate;
 border: 1px solid #FF9900;
}
XHTML
<table class="table_sample01">
<tr>
<td>border-collapse:collapse;</td>
<td>セルのボーダーが重なる</td>
<td>結合ボーダーモデル</td>
</tr>
<tr>
<td>border-collapse:collapse;</td>
<td>セルのボーダーが重なる</td>
<td>結合ボーダーモデル</td>
</tr>
<tr>
<td>border-collapse:collapse;</td>
<td>セルのボーダーが重なる</td>
<td>結合ボーダーモデル</td>
</tr>
</table>

<table class="table_sample02">
<tr>
<td>border-collapse:separate;</td>
<td>セルのボーダー間に空間が出来る</td>
<td>分離ボーダーモデル</td>
</tr>
<tr>
<td>border-collapse:separate;</td>
<td>セルのボーダー間に空間が出来る</td>
<td>分離ボーダーモデル</td>
</tr>
<tr>
<td>border-collapse:separate;</td>
<td>セルのボーダー間に空間が出来る</td>
<td>分離ボーダーモデル</td>
</tr>
</table>
表示確認
border-collapse:collapse; セルのボーダーが重なる 結合ボーダーモデル
border-collapse:collapse; セルのボーダーが重なる 結合ボーダーモデル
border-collapse:collapse; セルのボーダーが重なる 結合ボーダーモデル
border-collapse:separate; セルのボーダー間に空間が出来る 分離ボーダーモデル
border-collapse:separate; セルのボーダー間に空間が出来る 分離ボーダーモデル
border-collapse:separate; セルのボーダー間に空間が出来る 分離ボーダーモデル

border-collapseに関連するCSSプロパティ

外枠(ボーダー・アウトライン)
border 要素の周囲にボーダー(枠線)を付ける
border-bottom 要素の底辺にボーダー(枠線)を付ける
border-bottom-color 要素の底辺に設定したボーダー(枠線)の色を指定する
border-bottom-left-radius 要素の左下の角丸を指定する
border-bottom-right-radius 要素の右下の角丸を指定する
border-bottom-style 要素の底辺に設定したボーダー(枠線)のスタイル(種類)を指定する
border-bottom-width 要素の底辺に設定したボーダー(枠線)の太さを指定する
border-break ボックスが分割された場合のボーダーの表示方法を指定する
border-collapse テーブルセルのボーダーの表示の仕方を指定する
border-color 要素のボーダー(枠線)の色を指定する
border-image 要素のボーダー(枠線)に画像を指定する
border-image-outset ボーダーイメージエリアを広げる
border-image-repeat ボーダー(枠線)に指定された画像の繰り返し方法を指定する
border-image-slice ボーダー(枠線)に指定された画像の使用範囲を指定する
border-image-source ボーダー(枠線)に使用する画像ファイルを指定する
border-image-width 画像ボーダーの太さを指定する
border-left 要素の左辺にボーダー(枠線)を付ける
border-left-color 要素の左辺に設定したボーダー(枠線)の色を指定する
border-left-style 要素の左辺に設定したボーダー(枠線)のスタイル(種類)を指定する
border-left-width 要素の左辺に設定したボーダー(枠線)の太さを指定する
border-length 脚注の区切り線の長さを指定する
border-radius 要素の角丸についてまとめて指定する
border-right 要素の右辺にボーダー(枠線)を付ける
border-right-color 要素の右辺に設定したボーダー(枠線)の色を指定する
border-right-style 要素の右辺に設定したボーダー(枠線)のスタイル(種類)を指定する
border-right-width 要素の右辺に設定したボーダー(枠線)の太さを指定する
border-spacing テーブルセルのボーダーの間隔を指定する
border-style ボーダー(枠線)の種類を指定する
border-top 要素の上辺にボーダー(枠線)を付ける
border-top-color 要素の上辺に設定したボーダー(枠線)の色を指定する
border-top-left-radius 要素の左上の角丸を指定する
border-top-right-radius 要素の右上の角丸を指定する
border-top-style 要素の上辺に設定したボーダー(枠線)のスタイル(種類)を指定する
border-top-width 要素の上辺に設定したボーダー(枠線)の太さを指定する
border-width ボーダー(枠線)の太さを指定する
outline アウトラインの表示方法をまとめて指定する
outline-color アウトラインの色を指定する
outline-offset アウトラインのオフセット値を指定する
outline-style アウトラインのスタイルを指定する
outline-width アウトラインの太さを指定する