How to Inspect and Control CSS border-spacing and Cell Separation in Safari Web Inspector

In modern web typography and user interface design, styling HTML tables frequently moves beyond traditional continuous borders. Contemporary dashboard designs commonly feature \”floating row\” or card-style tables, where each row or cell appears separated by clean negative space, accompanied by independent drop shadows and rounded corners (border-radius). However, standard CSS margins do not apply to table cells (<td> and <th>) under standard layout rules. Instead, spacing between adjacent cell boundaries is dictated exclusively by the border-spacing property when border-collapse: separate is active. In Safari Web Inspector, developers can inspect, visualize, and adjust horizontal and vertical cell spacing in real time.

Syntax and Behaviour of border-spacing

The border-spacing property defines the distance between the borders of adjacent cells, as well as the distance between outer cells and the table’s perimeter border. It operates under two syntax variants:

• One-Value Syntax (border-spacing: 10px;): Applies a uniform spacing of 10px both horizontally between columns and vertically between rows.
• Two-Value Syntax (border-spacing: 16px 8px;): The first value specifies the horizontal spacing between columns; the second value specifies the vertical spacing between rows. This dual syntax is the foundation for creating compact, card-style table rows with pronounced vertical gutters.

Mandatory Prerequisite: The border-spacing property is effective only when border-collapse: separate; is active on the <table> element. If border-collapse: collapse; is declared, adjacent cell borders merge into a single shared border, and any border-spacing declarations are completely ignored by the rendering engine.

/* Card-Style Floating Row Table Configuration */
.card-table {
    border-collapse: separate;
    border-spacing: 0 12px; /* 0px horizontal gap, 12px vertical row separation */
    width: 100%;
}

.card-table tbody tr {
    background-color: #ffffff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

.card-table td {
    padding: 16px 20px;
    border: none;
}

/* Rounded corners on the first and last cells of each floating row */
.card-table td:first-child {
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
}

.card-table td:last-child {
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
}

Enabling Safari Web Inspector

To inspect table spacing properties in Safari on macOS:

1. Open Safari, choose Settings from the Safari menu (Cmd + ,), and select Advanced.
2. Check Show features for web developers.
3. Right-click your table element on any webpage and select Inspect Element (Cmd + Option + I).

Inspecting and Editing border-spacing in Web Inspector

Safari Web Inspector allows dynamic manipulation of table cell separation in the Elements tab.

1. Live Editing Spacing in the Styles Pane

1. Select the <table> element in the DOM tree.
2. In the Styles panel on the right, locate the rule block governing the table or declare a new rule inside element.style { }.
3. Ensure border-collapse: separate; is defined.
4. Add or modify border-spacing: 12px 6px;.
5. Click the individual numeric arguments and use the Up and Down arrow keys to scrub spacing interactively. Observe how vertical gaps push table rows apart into distinct cards while maintaining column alignment across the viewport.

2. Reviewing Computed Spacing Dimensions

1. Switch to the Computed tab in Web Inspector.
2. Filter for border-spacing and border-collapse.
3. Verify that WebKit resolves percentage or rem values into concrete physical pixel offsets.

Debugging Empty Cell Spacing with empty-cells

When using border-collapse: separate, cells containing no visible text or children can cause awkward gaps or invisible border segments depending on the empty-cells property:

• empty-cells: show; (Default): Renders borders and background colors around empty cells normally.
• empty-cells: hide;: Completely suppresses borders and backgrounds on empty cells, leaving empty transparent negative space.

In Web Inspector’s Styles pane, test toggling empty-cells: hide versus empty-cells: show to ensure that missing data in inventory or pricing tables maintains consistent grid geometry.

Auditing Box Model and Layout Reflows

Unlike flexbox or CSS grid gaps, border-spacing integrates directly into the table formatting context:

1. Select the <table> element and inspect the Box Model widget at the top of the Computed panel.
2. Notice that border-spacing does not appear as outer margin or inner padding, but as intrinsic table geometry spacing.
3. Verify that increasing vertical spacing does not cause table headers (<thead>) with sticky positioning (position: sticky; top: 0) to clip or detach unexpectedly during page scrolling.

Mastering border-spacing inspection within Safari Web Inspector equips web designers to construct sophisticated, accessible card-style tables and dashboard grids without redundant container markup.