Skip to main content Link Search Menu Expand Document Toggle dark mode Copy Code (external link)
paperwork.help

border-spacing : Table Cell Spacing Property

The border-spacing property sets the space between the cells of a table, when the borders are separate.

On this page

Usage

table { border-spacing: 4pt; }
table { border-spacing: 8pt 4pt; }   /* horizontal, then vertical */

Values

One or two lengths. With one value it is used for both the horizontal and the vertical spacing. With two values, the first is the horizontal spacing between columns, and the second the vertical spacing between rows.

Lengths can be in points, pixels, millimeters, inches, or relative to the font (em) or the table (%).

The default is 0.

Examples

<style>
    table.cards { width: 100%; border-spacing: 6pt; }
    table.cards td { border: 1pt solid #999; background-color: #f4f4f4; padding: 6pt; }
</style>

<table class="cards">
    <tr><td>One</td><td>Two</td></tr>
    <tr><td>Three</td><td>Four</td></tr>
</table>

Notes

  • Set on the table (table { border-spacing: 4pt }), or on a container, as it is inherited like in a browser. It has no effect when set on a cell (td) or a row.
  • Only applies when border-collapse is separate (the default). Many style sheets set table { border-collapse: collapse }, which turns the spacing off.
  • The html cellspacing attribute on the table is also supported (a number is in pixels), and any css border-spacing overrides it. From 9.8.0-beta.4.
  • The space is made as margins on each cell. Between cells it is the spacing value, and at the edges of the table the spacing is also added, as it is in a browser.
  • The table is the same width. The cells are narrower by the spacing.
  • Unlike a browser, the default is 0 and not a small spacing.
  • The value can be set from data, for example border-spacing: {{model.spacing}}.
  • Added in Paperwork.Core 9.8.

See Also