WEB技術の辞書・解説・使用例

TOP > CSS >  CSS辞典 > border-collapse
border-collapse  テーブル 

セルのボーダーの表示の仕方を指定する。

このエントリーをはてなブックマークに追加
セルのボーダーを重ねて表示するか（collapse）、間隔をあけて表示（separate）を指定します。

パラメーター

collapse　…セルの枠線を重ねて表示。
separate　…セルの枠線を間隔をあけて表示。
<table border="1" style="border-collapse:collapse;">

サンプルコード


<tr><td class="sample">春</td><td class="sample">夏</td></tr>
<tr><td class="sample">秋</td><td class="sample">冬</td></tr>
</table>
春夏
秋冬

<table border="1" style="border-collapse:separate;">
<tr><td class="sample">春</td><td class="sample">夏</td></tr>
<tr><td class="sample">秋</td><td class="sample">冬</td></tr>
</table>
春夏
秋冬

<table border="1" style="border-collapse:separate;border-spacing:10px;">
<tr><td class="sample">春</td><td class="sample">夏</td></tr>
<tr><td class="sample">秋</td><td class="sample">冬</td></tr>
</table>
春夏
秋冬


border-collapse:collapse;の場合border-spacing:は無効です。

<table border="1" style="border-collapse:collapse;border-spacing:10px;">
<tr><td class="sample">春</td><td class="sample">夏</td></tr>
<tr><td class="sample">秋</td><td class="sample">冬</td></tr>
</table>
春夏
秋冬