HTML STUDY
>
>

テーブルの枠線を重ねる

ここではCSSでテーブルのセルとセルの間隔を設定する方法を解説していきます。何も設定しなければテーブルのセルとセルの間隔は少し空いています。border-collapseを設定することによってセルの枠線を重ねることができます。

border-collapse

CSSプロパティborder-collapseを使用して、テーブルのセルとセルの間隔を設定していきましょう。テーブルは初期値としてseparateが設定されており、セルとセルの間隔は空いています。border-collapseの値にcollapseを指定することによってセルの枠線を重ねることができます。

CSSプロパティ解説
border-collapseセルの間隔を設定する
border-colapseの値解説
separateセルの間隔を空ける（初期値）
collapseセルの枠線を重ねる

HTMLコード記述例

<table class="b-separate" border="1">
<caption>separate（初期値）</caption>
<tr><td>セル１</td><td>セル２</td><td>セル３</td></tr>
<tr><td>セル４</td><td>セル５</td><td>セル６</td></tr>
</table>

<table class="b-collapse" border="1">
<caption>collapse</caption>
<tr><td>セル１</td><td>セル２</td><td>セル３</td></tr>
<tr><td>セル４</td><td>セル５</td><td>セル６</td></tr>
</table>

外部ファイルCSS記述例

@charset "utf-8";

table.b-separate {
 border-collapse: separate;
 margin-bottom: 10px;
}

table.b-collapse {
 border-collapse: collapse;
}

ブラウザ表示例

separate（初期値）
セル１セル２セル３
セル４セル５セル６
collapse
セル１セル２セル３
セル４セル５セル６

CSSテーブル 関連記事