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>
表示すると
| collapse | セルのボーダーが重なる | 結合ボーダーモデル |
| collapse | セルのボーダーが重なる | 結合ボーダーモデル |
| collapse | セルのボーダーが重なる | 結合ボーダーモデル |
| collapse | セルのボーダー間に空間が出来る | 分離ボーダーモデル |
| collapse | セルのボーダー間に空間が出来る | 分離ボーダーモデル |
| collapse | セルのボーダー間に空間が出来る | 分離ボーダーモデル |
テーブル(表)関連項目
| table-layout | テーブル(表)の表示方法を指定する |
| caption-side | テーブル(表)のキャプションの位置を指定する |
| border-collapse | セルのボーダーの表示の仕方を指定する |
| border-spacing | セルのボーダーの間隔を指定する |
| empty-cells | 空白セルのボーダーの表示・非表示を指定する |
