border-collapse : Table Border Model Property

The border-collapse property sets whether the borders of the cells in a table are separate, or are shared with the neighbouring cells and the table.

Usage

table { border-collapse: collapse; }
table { border-collapse: separate; }

Values

• separate - Each cell has its own borders. Where two cells meet, both borders are drawn next to each other. This is the default.
• collapse - A border between 2 cells, or between a cell and the table, is drawn once.

How borders collapse

When the borders of 2 neighbouring cells meet, only one is drawn:

• The wider border is used. When both are the same width, the border of the cell on the right (or below) is the one that is removed.
• A cell border on the edge of the table is removed if the table border is the same width or wider.
• A border is only removed when the other side has a border too, so a cell next to a cell without borders keeps its border.
• Cells that span columns or rows share edges with the cell next to the start of the span.

The border that remains is drawn inside the edge of its own cell, rather than centered on the line between the cells.

Examples

<style>
    table.report { width: 100%; border-collapse: collapse; }
    table.report td, table.report th { border: 1pt solid #666; padding: 4pt; }
</style>

<table class="report">
    <tr><th>Name</th><th>Total</th></tr>
    <tr><td>Widgets</td><td>12</td></tr>
</table>

Notes

• Set on the table (table { border-collapse: collapse }). It is inherited, as in a browser, so it can also be set on a container, and applies to any tables inside, including nested tables.
• When the borders are collapsed, border-spacing is ignored.
• The value can be set from data, for example border-collapse: {{model.borders}}.
• Added in Paperwork.Core 9.8. In earlier versions the property is ignored, and the borders are always separate.

See Also

• border-spacing
• border