border-collapse

外枠と内枠を重ねるか、重ねないかの指定をします。初期値はcollapse(重ねる)になっていますが、InternetExplorer6ではseparate(重ねない)が初期設定されているようです。


ブラウザ

IE5 / IE5.5 / IE6 / N7 / O6 / O7 / O9 / Fx1 / Fx2

▲PageTop

書式

要素[.class名][#id名]{ border-collapse : 値; }

▲PageTop

指定できる値

値 初期値 意味
collapse ○ 表の外枠とセルの外枠が合体して表示されます。
separate 表の外枠とセルの外枠が別々に表示されます。
inherit 親要素の値を継承します。

▲PageTop

サンプル

ソースコード

<html>
  <head>
    <title>サンプルコード</title>
    <style type="text/css">
      #sample1 {
        border-collapse : collapse;
        border : 1px solid #000000;
        width : 50%;
      }
      #sample1 td {
        border : 1px solid #000000;
      }
      #sample2 {
        border-collapse : separate;
        border : 1px solid #000000;
        width : 50%;
      }
      #sample2 td {
        border : 1px solid #000000;
      };
    </style>
  </head>
  <body>
    <table id="sample1">
      <caption>border-collapse : collapseのテーブル</caption>
      <tr>
        <td>プロパティ</td><td>指定した値</td>
      </tr>
      <tr>
        <td>border-collapse</td><td>collapse</td>
      </tr>
    </table>
    <br>
    <table id="sample2">
      <caption>border-collapse : separateのテーブル</caption>
      <tr>
        <td>プロパティ</td><td>指定した値</td>
      </tr>
      <tr>
        <td>border-collapse</td><td>separate</td>
      </tr>
    </table>
  </body>
</html>

表示結果

border-collapse : collapseのテーブル
プロパティ 指定した値
border-collapse collapse

border-collapse : separateのテーブル
プロパティ 指定した値
border-collapse separate

▲PageTop

関連項目

HTML

<table>


CSS

border

▲PageTop

▲