border-collapse 【セルのボーダーの表示の仕方】

[IE5] [IE6] [IE7] [Fx1] [Fx2] [Op6] [Op7] [Ns7]

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

collapse
隣接するセルのボーダーを重ねて表示します。

separate
隣接するセルのボーダーを間隔をあけて表示します。

border-collapseの使用例

CSSファイル

.sample001 {
 border-collapse: collapse;
 border: 1px solid #ff6600;
 margin: 10px;
}
.sample001 td {
 border: 1px solid #ffcc00;
}
.sample002 {
 border-collapse: separate;
 border: 1px solid #0066ff;
 margin: 10px;
}
.sample002 td {
 border: 1px solid #00ccff;
}

HTMLソース

<table class="sample001">
<caption>border-collapse : collapse</caption>
<tr>
<td>collapse </td><td>セルのボーダーが重なる </td><td>結合ボーダーモデル </td></tr>
<tr>
<td>collapse </td><td>セルのボーダーが重なる </td><td>結合ボーダーモデル </td></tr>
<tr>
<td>collapse </td><td>セルのボーダーが重なる </td><td>結合ボーダーモデル </td></tr>
</table>

<table class="sample002">
<caption>border-collapse : separate</caption>
<tr>
<td>collapse </td><td>セルのボーダー間に空間が出来る </td><td>分離ボーダーモデル </td></tr>
<tr>
<td>collapse </td><td>セルのボーダー間に空間が出来る </td><td>分離ボーダーモデル </td></tr>
<tr>
<td>collapse </td><td>セルのボーダー間に空間が出来る </td><td>分離ボーダーモデル </td></tr>
</table>

表示すると

border-collapse : collapse
collapse セルのボーダーが重なる 結合ボーダーモデル 
collapse セルのボーダーが重なる 結合ボーダーモデル 
collapse セルのボーダーが重なる 結合ボーダーモデル 
border-collapse : separate
collapse セルのボーダー間に空間が出来る 分離ボーダーモデル 
collapse セルのボーダー間に空間が出来る 分離ボーダーモデル 
collapse セルのボーダー間に空間が出来る 分離ボーダーモデル 

テーブル(表)関連項目

table-layout テーブル(表)の表示方法を指定する 
caption-side テーブル(表)のキャプションの位置を指定する 
border-collapse セルのボーダーの表示の仕方を指定する 
border-spacing セルのボーダーの間隔を指定する 
empty-cells 空白セルのボーダーの表示・非表示を指定する 

戻る

TOP

WEB SEARCH
MENU
CONTENTS
digilog.TOP
digilog.HTML
digilog.CSS
digilog.SEO
digilog.img