CSSborder -collapseプロパティ
例
2つのテーブルの折りたたみ境界モデルを設定します。
#table1 {
border-collapse: separate;
}
#table2 {
border-collapse: collapse;
}
以下の「自分で試してみてください」の例をもっと見てください。
定義と使用法
このborder-collapse
プロパティは、テーブルの境界線を1つの境界線に折りたたむか、標準のHTMLのように分離するかを設定します。
デフォルト値: | 分ける |
---|---|
遺伝性の: | はい |
アニメート可能: | 番号。アニメート可能について読む |
バージョン: | CSS2 |
JavaScript構文: | オブジェクト.style.borderCollapse = "collapse" |
ブラウザのサポート
表の数字は、プロパティを完全にサポートする最初のブラウザバージョンを示しています。
Property | |||||
---|---|---|---|---|---|
border-collapse | 1.0 | 5.0 | 1.0 | 1.2 | 4.0 |
CSS構文
border-collapse: separate|collapse|initial|inherit;
プロパティ値
Value | Description | Play it |
---|---|---|
separate | Borders are separated; each cell will display its own borders. This is default. | |
collapse | Borders are collapsed into a single border when possible (border-spacing and empty-cells properties have no effect) | |
initial | Sets this property to its default value. Read about initial | |
inherit | Inherits this property from its parent element. Read about inherit |
その他の例
例
「border-collapse:separate」を使用する場合、border-spacingプロパティを使用して、セル間のスペースを設定できます。
#table1 {
border-collapse: separate;
border-spacing: 10px;
}
例
「border-collapse:collapse」を使用すると、コードの最初に表示されるセルが「win」になります。
table, td, th {
border: 3px solid red;
}
#table1 {
border-collapse:
collapse;
border-color: blue;
}
関連ページ
CSSチュートリアル:CSSテーブル
HTML DOMリファレンス:borderCollapseプロパティ