表
border-collapse
border-collapse は、表のセルの枠線を、セルごとに離して描くか、隣のセルと重ねて 1 本にまとめるかを決めます。
構文
separate | collapseプレビュー
| 個数 | |
|---|---|
| りんご | 3 |
| みかん | 5 |
プリセット
右下の角をドラッグするとサイズを変えられます
コード
.box {
border-collapse: collapse;
}コントロール
border-collapsecollapse
| 個数 | |
|---|---|
| りんご | 3 |
| みかん | 5 |
解説
値の意味
separate：初期値です。セルごとに自分の枠線を描きます。セルとセルの間はborder-spacingの分だけ空きます（0 なら、隣どうしの枠線がくっついて 2 本並びます）。collapse：隣り合うセルの枠線を重ねて 1 本にまとめます。表のいちばん外側では、表の枠線とセルの枠線もまとめます。このとき、表のborder-spacingとpadding、表とセルのborder-radiusは効きません。
重なった枠線のどれが描かれるか
collapse でまとめるときは、重なった枠線から次の順に 1 つが選ばれます。
border-styleがhiddenの枠線があれば、それが選ばれ、枠線は描かれません。- 太いほうが選ばれます。
- 太さが同じなら、
double、solid、dashed、dotted、ridge、outset、groove、inset、noneの順に、前にあるスタイルが選ばれます。 - それでも決まらないときは、表の枠線よりセルの枠線が選ばれます。
どこに書くか
border-collapse は継承するプロパティですが、HTML の table 要素にはブラウザの既定のスタイルで separate が指定されているので、表を囲む要素に書いても表には届きません。table 要素そのものに書きます。なお Tailwind CSS のリセット（Preflight）は、table を collapse にしています。
このページのプレビューでは、箱の中に表を置き、表に inherit を指定して箱に書いた値を受け取らせています。表の枠線（黒）をセルの枠線（青）より太くしているので、collapse にすると、外側は表の枠線が選ばれます。