Tables
border-spacing
border-spacing sets how much space to leave between the cells of a table.
Syntax
<length [0,∞]>{1,2}Preview
| 個数 | |
|---|---|
| りんご | 3 |
| みかん | 5 |
Presets
Drag the bottom-right corner to resize
Code
.box {
border-spacing: 0.5em 0.25em;
}Controls
Horizontal (first value)0.5em
Vertical (second value)0.25em
| 個数 | |
|---|---|
| りんご | 3 |
| みかん | 5 |
About
Values
Write one or two lengths separated by a space. The first is the horizontal spacing and the second the vertical spacing (border-spacing: 8px 4px). With one value, both use it. Negative values and percentages are not allowed.
The initial value is 0, but the browser's default styles give HTML table elements 2px.
Things to watch
- It has no effect with
border-collapse: collapse, where neighboring cell borders merge into one and no space is left between them. - The same space is also left between the outer cells and the table's border (added to the table's
padding, if any). The table's background shows through the gaps. gapputs the vertical (row) gap first, butborder-spacingputs the horizontal spacing first.- It is inherited, but the default styles set a value on
tableelements, so writing it on an element around the table does not reach the table. Write it on thetableelement itself.
The preview places a table inside the box and gives the table inherit so it takes the value written on the box. The header cells are tinted, so the table's white background shows between the cells.