English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

CSSリファレンスマニュアル

CSS@ルール(RULES)

CSS属性全書

CSS border-collapse 属性の使用方法および例

border-collapse CSS属性は、テーブルのセル枠が単一の枠に折り畳まるか通常に分離されるかを指定します。

CSSのテーブルセルに枠を設定するために、2種類の異なるモデルがあります。

分離枠モデル

このモデルでは、各テーブルセルに独立した枠があります。

border-spacing属性で指定された隣接セルの境界間の距離。

注意:分離された枠モデルでは、セル(およびテーブル自体)のみに枠が付けることができます;行、列、行グループ、および列グループには付けることができません。

重複する枠モデル

折り畳み枠モデルでは、隣接するテーブルセルが枠を共有しています。

注意:折り畳み枠モデルでは、セル、行、行グループ、列、および列グループの全てまたは一部の枠を指定できます。

border-collapse属性はテーブルの境界線モデルを選択します。値separateは分離の境界線モデルを選択します。値collapseは折りたたみの境界線モデルを選択します。

以下の表は、この属性の使用方法とバージョン履歴、JavaScriptスクリプトでの使用構文を説明しています。

デフォルト値:分離
適用範囲:このテーブルおよび直列リスト要素
継承:はい
アニメーション可能:いいえ。参照してください。 アニメーション属性
バージョン:CSS 2、3
JavaScriptの構文:object object.style.borderCollapse="collapse"

border-collapseの使用構文

この属性の構文は以下の通りです:

border-collapse: separate | collapse | initial | inherit

以下の例では、borderを使用する方法を示します。-collapse属性。

  table {
   border-collapse: collapse;
  }
  th, td {
   border: 1px solid black;
  }
テストして‹/›

属性値

以下の表は、この属性の値を説明します。

説明
separate分離の境界線モデルを選択します。これはデフォルト値です。
collapse折りたたみの境界線モデルを選択します。border-spacingおよびempty-cells属性は無視されます。
initialこの属性をデフォルト値に設定します。
inherit指定された場合、関連する要素は親要素のborderを取得します。-collapse属性の値。

ブラウザの互換性

border-collapse属性のブラウザの互換性について、以下の表の数字は、この属性をサポートするブラウザの最低バージョン番号を示します;すべての主要ブラウザはこの属性をサポートしています。

  • Firefox 1+

  • Google Chrome1+

  • Internet Explorer 5+

  • Apple Safari 1.2+

  • Opera 4+

警告: を使用してください。border-collapse属性を指定する場合、常に有効な<!DOCTYPE>さもなければ、予期せぬ結果が発生する可能性があります。

さらに詳しく

以下のチュートリアルを参照してください:CSS BorderCSS3 Border

テーブルに関連する属性:border-spacingempty-cellstable-layout