border-collapseの使い方

border-collapse

プロパティの説明

border-collapseは、表の区切りの設定を指定するプロパティです。<table>に指定することができます。

指定できる値

separate: 標準設定。セルを一つずつ区切り、枠を表示する。
collapse: セルの枠を全てまとまった状態にする。

サンプル

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "https://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">

<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 <meta http-equiv="Content-Style-Type" content="text/css">
 <title>サンプルページ</title>
 <style type="text/css">
 <!--
 table, td{border:solid 2px #999999;}
 .b1{border-collapse:collapse;}
 -->
 </style>
</head>

<body>
 <h1>サンプルページ</h1>
 <h2>通常設定の場合</h2>
 <table>
  <tr><td>通常設定</td><td>通常設定</td></tr>
  <tr><td>通常設定</td><td>通常設定</td></tr>
 </table>
 <h2>border-collapseを指定した場合</h2>
 <table class="b1">
  <tr><td>collapse</td><td>collapse</td></tr>
  <tr><td>collapse</td><td>collapse</td></tr>
 </table>
</body>

</html>