テーブルのボーダー表示を結合か分離か指定するborder-collapseプロパティ
border-collapse

　border-collapseプロパティはテーブル（<table>要素）のボーダーの表示モデルに、「結合ボーダーモデル」「分離ボーダーモデル」のどちらを利用するかを設定します。

基本データ

構文 セレクタ{border-collapse: 値;}
継承 ×
値
collapse、separate
　
親から継承させる場合
inherit
効果 テーブルボーダーの表示モデルを設定
初期値 separate
適用個所 テーブル（<table>要素）

例：

野菜の価格表1
キャベツ100円長野
長ネギ50円埼玉

野菜の価格表2
キャベツ100円長野
長ネギ50円埼玉

table.sample1 { border-collapse : collapse ; }
table.sample2 { border-collapse : separate ; }

 <table width="480" border="1" bordercolor="#000000" class="sample1">
<caption>野菜の価格表1</caption>
<tbody>
<tr>
<td>キャベツ</td><td>100円</td><td>長野</td>
</tr>
<tr>
<td>長ネギ</td><td>50円</td><td>埼玉</td>
</tr>
</tbody>
<br>
</table>
<br>
<table width="480" border="1" bordercolor="#000000" class="sample2">
<caption>野菜の価格表2</caption>
<tbody>
<tr>
<td>キャベツ</td><td>100円</td><td>長野</td>
</tr>
<tr>
<td>長ネギ</td><td>50円</td><td>埼玉</td>
</tr>
</tbody>
</table>

動作Webブラウザ

Internet Explorer IE 8以上
Firefox Firefox 1以上
SafariSafari 1.3以上
Opera Opera 9.2以上
ChromeChrome 2以上
iPhone/iPad 全バージョン

標準JavaScriptによるDOMでの参照方法

[window.]document.getElementById("ID属性値").style.borderCollapse

jQueryを使った参照方法

$('【セレクタ】').css('border-collapse','【値】');
$('【セレクタ】').css({'border-collapse':【値】'});

CSSリファレンス インデックス

有限会社タグパンダ
喜安 亮介




HTML5 + UX フォーラム 新着記事
＠ITメールマガジン　新着情報やスタッフのコラムがメールで届きます（無料）

注目のテーマ

デザインハック 記事ランキング

本日 月間
＠IT