Tables
border-collapse
border-collapse decides whether table cells draw their own separate borders or share a single border with their neighbors.
Syntax
separate | collapsePreview
| 個数 | |
|---|---|
| りんご | 3 |
| みかん | 5 |
Presets
Drag the bottom-right corner to resize
Code
.box {
border-collapse: collapse;
}Controls
border-collapsecollapse
| 個数 | |
|---|---|
| りんご | 3 |
| みかん | 5 |
About
Values
separate: the initial value. Each cell draws its own borders, and cells are spaced apart byborder-spacing(at 0, neighboring borders touch and show as two lines).collapse: borders of neighboring cells are merged into one. At the outer edge, the table's border merges with the cells' borders too. The table'sborder-spacingandpadding, and theborder-radiusof the table and its cells, are then ignored.
Which border wins
When borders are collapsed, one of the overlapping borders is picked in this order.
- A border whose
border-styleishiddenwins, and no border is drawn. - The wider border wins.
- At the same width, the style that comes first in
double,solid,dashed,dotted,ridge,outset,groove,inset,nonewins. - If that still ties, the cell's border wins over the table's.
Where to write it
border-collapse is inherited, but the browser's default styles set separate on HTML table elements, so writing it on an element around the table does not reach the table. Write it on the table element itself. Note that Tailwind CSS's reset (Preflight) sets tables to collapse.
The preview places a table inside the box and gives the table inherit so it takes the value written on the box. The table's border (black) is wider than the cells' borders (blue), so with collapse the table's border wins on the outside.