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>