隣り合うセルとの枠線の表示のしかたを指定します。
collapse , separate , border-spacing
| border-collapse : collapse; | ||
|---|---|---|
| collapse | 各セル間の隙間が無くなりボーダーが 重なり一本線になります。 |
border: 1px solid red; |
| collapse | padding: 3px; | |
| border-collapse : separate; | ||
|---|---|---|
| separate | 隣合うセルのボーダーに隙間ができます。 | border: 1px solid lime; |
| separate | 主要ブラウザは'separate'が初期値 | border-spacing:4px; |
サンプルソース
<html>
<head>
<title>table border-collapseプロパティ CSS</title>
<style type="text/css">
<!--
.Coll {
border-collapse: collapse; /*ボーダーを 重ねて表示*/
}
.Coll td,th {
border: 1px solid red; /*枠線の設定、太さ スタイル 色*/
padding: 3px; /*セル内余白*/
}
.Sepa {
border-collapse: separate; /*ボーダーの 間隔をあけて表示*/
border-spacing:4px; /*間隔の幅*/
}
.Sepa th,td {
border: 1px solid lime;
padding: 2px;
}
-->
</style>
</head>
<body>
<table class="Coll">
<tr>
<th colspan="3">border-collapse : collapse;</th>
</tr>
<tr>
<td>collapse </td>
<td rowspan="2">各セル間の隙間が無くなりボーダーが<br>
重なり一本線になります。</td>
<td>border: 1px solid red;</td>
</tr>
<tr>
<td>collapse </td>
<td>padding: 3px;</td>
</tr>
</table>
<br>
<table class="Sepa">
<tr>
<th colspan="3">border-collapse : separate;</th>
</tr>
<tr>
<td>separate</td>
<td>隣合うセルのボーダーに隙間ができます。</td>
<td>border: 1px solid lime;</td>
</tr>
<tr>
<td>separate</td>
<td>主要ブラウザは'separate'が初期値</td><td>padding:
2px;</td>
</tr>
</table>
</body>
</html>
border-collapse プロパティ
隣接するセルとのボーダー（枠線）の表示の仕方を設定します。
border-collapse:collapse;
隣接するセルとの隙間が無くなりボーダーが重なり一本線になります。
border-collapse:separate;
隣合うセルのボーダーに隙間ができます。
border-spacingプロパティ
border-collapse:separate;を設定した場合
隣合うセルのボーダーにできた隙間の幅を指定。することができます。
border-spacing: 5px; 上下左右全方向の値。
border-spacing: 5px 3px; 前の値が左右、後が上下の値になります。
＊このプロパティはIEが未対応です。
対応はHTMLでの<table>要素のcellspacing属性の利用しかないようです。
<table cellspacing='5'>〜</table>
| 赤色 | 白色 |
| #ff0000 | #ffffff |
separate を使った表
| 順位 | ブラウザ | シェア | 推移 |
|---|---|---|---|
| 1 | IE | 54.27% | ↓ |
| 2 | Firefox | 21.71% | ↑ |
| 3 | Chrome | 12.52% | ↑ |
| 4 | Safari | 7.28% | ↑ |
| 5 | Orera | 2.03% | ↓ |
セルの色は設定しなけれは透明なので
tableの背景色が見えるので 'th' 'td' の背景色を指定します。
border-collapse: separate;でセルの間隔を空けるとtableの背景色が透けて見え
枠線を引いた様になります。
CSS コード
<style type="text/css">
#tbl00 {
background-color : gray;/*table 背景色*/
border-collapse: separate;
border-spacing:1px;
}
#tbl00 tr th {
background-color :#008b8b ;/*th 背景色*/
color : #fff;
}
#tbl00 tr td {
background-color :#e0ffff;/*tr 背景色*/
color : #800000;
}
</style>
さくらのレンタルサーバ スタンダード
CSSで作る吹き出しボックス borderプロパティ
Table cellIndexプロパティ、セルのインデックス値の取得
HTML DOM Table rows,cellsコレクション
テーブルの行、表示/非表示 javascript
HTML テーブル( 表 ) の作成。
テーブルの表題を固定してデータ部分だけをスクロールさせる。
テーブルの行の背景色を一行おきに変えます。 javascript
テーブルの行の文字色,背景色を変えてハイライトします。
サーバーカウボーイ
