{border-collapse:collapse;}でテーブルの枠線を重ねて表示するこ とが出来ます。下の例でわかるように通常のテーブルはテーブルの外枠と内枠の間隔が ありますがこの指定をすることでセルと外枠の線が重なって表示されます。

【ブラウザ表示】

通常の枠線を重ねると↓

<table class="sample2">
<tr>
<td class="sample2a">枠線が</td><td class="sample2a">重なってます。</td>
</tr>
</table>

table.sample2{
border-collapse:collapse;
border:1px black solid;
}
td.sample2a{border:1px black solid;}

<table style="border:1px black solid; border-collapse:collapse;">
<tr>
<td style="border:1px black solid;">枠線が</td>
<td style="border:1px black solid;">重なってます。</td>
</tr>
</table>

■ 外枠と内枠の線の間隔をあける

【ブラウザ表示】

<table class="sample2b">
<tr>
<td class="sample2c">枠線同士の</td>
<td class="sample2c">間隔があいています。
</td>
</tr>
</table>

table.sample2b{
border-collapse:separate;
border:1px black solid;
}
td.sample2c{border:1px black solid;}

<table style="border:1px black solid; border-collapse:separate;">
<tr>
<td style="border:1px black solid;">枠線同士の</td>
<td style="border:1px black solid;">間隔があいています。</td>
</tr>
</table>

■ その他の項目

スタイルシート一覧のページに戻る