2011年07月18日

テーブル border-collapseプロパティ CSS

スポンサード リンク

 隣り合うセルとの枠線の表示のしかたを指定します。
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 を使った表
2011年5月 ブラウザシェア (Net Applications)
順位 ブラウザ シェア 推移
1IE54.27%
2Firefox21.71%
3 Chrome 12.52%
4Safari7.28%
5Orera2.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
テーブルの行の文字色,背景色を変えてハイライトします。
サーバーカウボーイ

posted by javaScript at 18:17 | 大阪 ☔ | テーブル | このブログの読者になる | 更新情報をチェックする
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。