The border-spacing
CSS property sets the distance between the borders of adjacent <table>
cells. This property applies only when border-collapse
is separate
.
The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
The border-spacing
value is also used along the outside edge of the table, where the distance between the table's border and the cells in the first/last column or row is the sum of the relevant (horizontal or vertical) border-spacing
and the relevant (top, right, bottom, or left) padding
on the table.
Note: The border-spacing
property is equivalent to the deprecated cellspacing
<table>
attribute, except that it has an optional second value that can be used to set different horizontal and vertical spacing.
Syntax
/* <length> */
border-spacing: 2px;
/* horizontal <length> | vertical <length> */
border-spacing: 1cm 2em;
/* Global values */
border-spacing: inherit;
border-spacing: initial;
border-spacing: unset;
The border-spacing
property may be specified as either one or two values.
- When one
<length>
value is specified, it defines both the horizontal and vertical spacings between cells. - When two
<length>
values are specified, the first value defines the horizontal spacing between cells (i.e., the space between cells in adjacent columns), and the second value defines the vertical spacing between cells (i.e., the space between cells in adjacent rows).
Values
<length>
- The size of the spacing as a fixed value.
Formal definition
Initial value | 0
|
Applies to | table and inline-table elements
|
Inherited | yes |
Computed value | two absolute lengths |
Animation type | discrete |
Formal syntax
<length> <length>?
Examples
Spacing and padding table cells
This example applies a spacing of .5em
vertically and 1em
horizontally between a table's cells. Note how, along its outside edges, the table's padding
values are added to its border-spacing
values.
HTML
<table>
<tr>
<td>1</td><td>2</td><td>3</td>
</tr>
<tr>
<td>4</td><td>5</td><td>6</td>
</tr>
<tr>
<td>7</td><td>8</td><td>9</td>
</tr>
</table>
CSS
table {
border-spacing: 1em .5em;
padding: 0 2em 1em 0;
border: 1px solid orange;
}
td {
width: 1.5em;
height: 1.5em;
background: #d2d2d2;
text-align: center;
vertical-align: middle;
}
Result
Specifications
Specification | Status | Comment |
---|---|---|
CSS Level 2 (Revision 1)The definition of 'border-spacing' in that specification. | Recommendation | Initial definition. |
Browser compatibility
The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Update compatibility data on GitHub
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
border-spacing
|
Chrome
Full support 1 |
Edge
Full support 12 |
Firefox
Full support 1 |
IE
Full support 8 |
Opera
Full support 4 |
Safari
Full support 1 |
WebView Android
Full support ≤37 |
Chrome Android
Full support 18 |
Firefox Android
Full support 4 |
Opera Android
Full support 14 |
Safari iOS
Full support 1 |
Samsung Internet Android
Full support 1.0 |
Legend
- Full support
- Full support
See also
border-collapse
,border-style
- The
border-spacing
property alters the appearance of the<table>
HTML element.
border-spacing by Mozilla Contributors is licensed under CC-BY-SA 2.5.