border-spacing

Definition

The border-spacing property in CSS is used to specify the amount of space between the cells in a table. It is used in conjunction with the border-collapse property, which controls whether or not the borders of table cells are joined together or separated.

Examples

Setting the border spacing for a table:

table {
    border-spacing: 10px;
}

Setting the horizontal and vertical border spacing for a table:

table {
    border-spacing: 5px 10px;
}

Setting the border spacing for an inline table:

.inline-table {
    display: inline-table;
    border-spacing: 15px;
}

Setting the border spacing for a table with a class name:

table.spaced {
    border-spacing: 20px;
}

Using the border-spacing property in conjunction with the border-collapse property:

table {
    border-collapse: separate;
    border-spacing: 10px;
}

Values

Best Practices

• Use the same units for horizontal and vertical spacing. This will make it easier to predict the layout of your table.
• Use relative units like em or rem for border spacing instead of absolute units like px or pt. This will make your table more responsive and adapt to different screen sizes.
• Avoid using the border-spacing property in combination with the border-collapse: collapse property. This will cause the border-spacing property to have no effect.
• Be consistent with the spacing used throughout your table. Using different values for different tables or cells can create an inconsistent look and feel.
• Be mindful of accessibility, Be sure to keep the spacing between cells wide enough so that users who rely on screen readers can easily navigate your table.
• If possible, test your table layout with different screen sizes and resolutions to ensure that it looks good and is easy to read on all devices.
• Keep in mind that the border-spacing property only works with tables, it will not work with other types of elements such as divs or lists.

Browser Compatibility