We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

概要

CSS の border-collapse プロパティは、表の 境界線 (border) の形式を選びます。このプロパティは、表のセルの外見やスタイルに大きく影響します。

separated 形式は、従来の HTML 表の形式です。各セルは別個に境界線を持っています。隣接セルの境界線間の距離を border-spacing プロパティで与えられます。

collapsed 形式では、表の隣接セルは境界線を共有します。この形式では border-style の値 insetgroove のように動作し、outsetridge のように動作します。

初期値separate
適用対象table および inline-table 要素
継承継承する
メディアvisual
計算値指定値
Animation typediscrete
正規順序形式文法で定義される一意のあいまいでない順序

構文

形式文法: collapse | separate
border-collapse: collapse
border-collapse: separate

border-collapse: inherit

separate
表の境界線を別個に描画する形式。デフォルトです。
collapse
表の境界線を共有する形式。

実際の表示を確認

th, td { border: solid 1px red; }
table { border-collapse: collapse; }
border-collapse: separate
Browser Layout Engine
Internet Explorer Trident
Firefox Gecko
Opera Presto
Safari WebKit
border-collapse: collapse
Browser Layout Engine
Internet Explorer Trident
Firefox Gecko
Opera Presto
Safari WebKit

仕様書

仕様書 策定状況 コメント
CSS Level 2 (Revision 1)
border-collapse の定義
勧告  

ブラウザ実装状況

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

機能 Chrome Firefox (Gecko) Internet Explorer Opera Safari
基本サポート 1.0 1.0 (1.7 or earlier) 5.0 4.0 1.2 (125)
機能 Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
基本サポート ? 1.0 (1.9.2) ? ? ?

ドキュメントのタグと貢献者

タグ: 
このページの貢献者: SphinxKnight, fscholz, teoli, ethertank, sosleepy
最終更新者: SphinxKnight,