border-collapseプロパティ

TOPページに戻る > CSS

スポンサード リンク

border-collapseプロパティ

table要素の枠線の表示方法を指定できます
値にcollapseを指定すると表の枠線を一体化できます
値にseparateを指定するとセルごとに枠線を表示します
初期値はseparateです。border-collapseプロパティを指定しない場合はseparateで表示されます

使い方(書式)

セレクタ { border-collapse: 値; }                                    

border-collapseプロパティ

対応ブラウザ ie6 ie7 ie8 ie9 ie10 ie11 google Chrome safari fire fox opera
適用できる要素 table要素
子要素へのスタイルの継承 する

プロパティの値 説明
collapse セルの枠線を一体化する
separate セルごとに枠線を表示。これが初期値

実際の指定方法

.hoge { border-collapse: collapse; }   /* 表の枠線を一体化できます */
.hoge2 { border-collapse: separate; }  /* セルごとに枠線を表示 */

html部分

<p>実際の表示</p>
<p>実際の表示 値がcollapse 表の枠線を一体化</p>
<table class="hoge">
<tr>
<td>collapse</td>
<td>collapse</td>
</tr>
<tr>
<td>collapse</td>
<td>collapse</td>
</tr>
</table>

<p>実際の表示 値がseparate セルごとに枠線を表示</p>
<table class="hoge2">
<tr>
<td>separate</td>
<td>separate</td>
</tr>
<tr>
<td>separate</td>
<td>separate</td>
</tr>
</table>

実際の表示 値がcollapse 表の枠線を一体化

collapse collapse
collapse collapse

実際の表示 値がseparate セルごとに枠線を表示

separate separate
separate separate




(C)2012 ホームページ作成無料