How to Inspect and Control CSS empty-cells for Data Tables in Safari Web Inspector

Table Rendering Mechanics and the empty-cells Property

When developing responsive financial dashboards, enterprise resource planning (ERP) systems, or data analytics grids, tabular data frequently contains missing or null entries. By default, web browsers must decide whether to draw borders and background fills around table cells (<td> and <th>) that possess no visible contents or child nodes. The CSS empty-cells property provides explicit control over this rendering behaviour in WebKit-based browsers such as Apple Safari.

The empty-cells property accepts two primary values:

• show (Default): Renders borders and background colours around empty cells, maintaining visual grid continuity across the table structure.
• hide: Suppresses the drawing of borders and backgrounds on empty cells. If an entire row contains only empty cells and has no height constraint, the row collapses completely.

Crucially, the empty-cells specification only applies when the table’s border model is set to border-collapse: separate. When border-collapse: collapse is active, adjacent cells merge their border boundaries, rendering empty-cells inert because WebKit cannot isolate an individual cell’s perimeter. In Safari Web Inspector, web engineers can diagnose table model interactions, inspect computed cell styles, and live-toggle empty cell rendering.

Enabling Safari Web Inspector on macOS

To inspect and manipulate DOM tables, ensure Safari’s developer tools are enabled. If the Develop menu is not visible in the macOS menu bar, enable it through Safari settings:

1. Launch Safari and navigate to Safari > Settings (or press Cmd + ,).
2. Click the Advanced tab.
3. Check the box labelled “Show features for web developers” (in earlier macOS releases, labelled “Show Develop menu in menu bar”).

Once enabled, right-click any element on the page and select Inspect Element, or press Option + Cmd + I to open the Web Inspector console.

Inspecting Table Cell States and Computed Rules

In the Web Inspector Elements tab, navigate the DOM tree to locate the target <table> element or use the element selection cursor (Shift + Cmd + C) to click directly on an empty cell.

Inspect the CSS rules in the Styles panel on the right sidebar. First, verify whether the parent table or wrapping container defines a separated or collapsed border model:

/* Target table requiring separated borders for empty-cells support */
table.data-grid {
    border-collapse: separate;
    border-spacing: 8px;
    empty-cells: hide;
}

table.data-grid td {
    border: 1px solid #d1d5db;
    background-color: #f9fafb;
    padding: 12px 16px;
}

Next, switch to the Computed tab in Web Inspector. Search for empty-cells and border-collapse. If border-collapse resolves to collapse, Safari renders all cell borders regardless of empty-cells: hide. Identifying this conflict immediately clarifies why an empty cell still displays ghost borders in layout output.

Defining What WebKit Considers an Empty Cell

In WebKit’s rendering engine, a cell is evaluated as “empty” only if it contains no visible rendered content. The exact definition requires careful attention to markup nuances:

• Truly Empty: <td></td> contains no child nodes or whitespace.
• Whitespace Only: Cells containing only ASCII whitespace (such as spaces, tabs, or newlines) are treated as empty if the CSS white-space property collapses them (such as normal). However, if white-space: pre is declared, whitespace is preserved and the cell is no longer considered empty.
• Non-Breaking Space ( ): Inserting   creates a visible inline character. WebKit considers this valid content, preventing empty-cells: hide from taking effect.
• Empty Elements: Self-closing or void elements (such as <span></span> with no dimensions or text) can prevent empty classification if they generate an inline formatting context.

Using the DOM tree editor in Web Inspector, double-click inside the cell node to remove lingering   entities or extraneous tags when testing empty cell suppression.

Live-Testing empty-cells in Safari Web Inspector

To verify the visual impact of empty cell styling dynamically:

1. Select the parent <table> node in the Elements panel.
2. In the Styles pane, click inside the inline element.style {} block or click the New Rule (+) button.
3. Type empty-cells: hide; and observe the table view in real time. Notice how cells devoid of text immediately drop their borders and background fills, creating a clean, floating data appearance.
4. Toggle the value between hide and show using the rule checkbox to compare layout readability.

To provide modern fallback styling for older browsers or accessibility engines, combine empty-cells with the modern CSS :empty pseudo-class:

/* Complementary styling for empty cells */
table.data-grid td:empty {
    background-color: transparent;
    border-color: transparent;
}

Testing both declarations side-by-side in Safari Web Inspector confirms that print stylesheets, high-contrast display modes, and desktop viewports retain flawless table aesthetics without redundant HTML scaffolding.