Codestin Search App

CSS empty-cells Property

If this site has been useful, we’d love your support! Consider buying us a coffee to keep things going strong!

Description

The empty-cells property controls whether table cells that contain no meaningful content are rendered with their visual styling. In practice this means it determines if a truly empty cell should appear with the cell’s visual treatment, so authors can avoid visual gaps or extra lines where no data exists. The property only applies to table cells and affects how those cells contribute to the table’s appearance without changing layout or the document structure.

What counts as “empty” for the purposes of this property depends on whether the cell contains any content, including generated content. For example, text nodes, images and other replaced elements make a cell non-empty; likewise, content injected via the content mechanism will typically prevent a cell from being treated as empty. User-agent specifics can vary when a cell contains only invisible elements (for instance elements with certain visibility or zero dimensions), so testing is advisable if you rely on edge cases.

The visual result also interacts with other table-related properties. When table borders are being handled in collapse mode the visual outcome for empty cells can differ from the separate-borders case; see border-collapse for how border conflict resolution changes rendering. The property only applies to elements that behave as table cells (see display), and designers often use it together with cell-level visual rules such as background or border styles to produce cleaner tables. Practical uses include removing noise from tables that have plenty of structurally empty cells and ensuring decorative lines or fills aren’t shown where there’s no content — but be mindful that hiding such visuals can make tabular relationships less obvious to users, so use it in a way that preserves clarity and accessibility.

Definition

Initial value: show
Applies to: 'table-cell' elements
Inherited: Yes
Computed value: As specified
Animatable: No
JavaScript syntax: object.style.emptyCells

Interactive Demo

empty-cells: show;

empty-cells: hide;

Bananas	5 Dollars
	10 Dollars
Oranges	2 Dollars
Grapes

Syntax

empty-cells: show | hide | inherit

Values

showRenders empty cells with inherited borders and styles.
hideDoes not render the cell.

Example

HTML

<div class="wrapper">

    <h2>CSS empty-cells Example</h2>

    <div class="tables">

        <table class="example show">

            <caption>empty-cells: show</caption>

            <tr>

                <td>Item</td>

                <td>Qty</td>

                <td>Note</td>

            </tr>

            <tr>

                <td>Apples</td>

                <td>4</td>

                <td></td>

            </tr>

            <tr>

                <td>Oranges</td>

                <td></td>

                <td>Fresh</td>

            </tr>

        </table>



        <table class="example hide">

            <caption>empty-cells: hide</caption>

            <tr>

                <td>Item</td>

                <td>Qty</td>

                <td>Note</td>

            </tr>

            <tr>

                <td>Apples</td>

                <td>4</td>

                <td></td>

            </tr>

            <tr>

                <td>Oranges</td>

                <td></td>

                <td>Fresh</td>

            </tr>

        </table>

    </div>



    <p class="note">Empty cells are intentionally left blank to demonstrate the effect.</p>

</div>

CSS

/* Page layout */
* {
    box-sizing: border-box;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}

.wrapper {
    max-width: 900px;
    margin: 24px;
}

.tables {
    display: flex;
    gap: 28px;
    align-items: flex-start;
}

/* Table base styles */
.example {
    width: 340px;
    border: 2px solid #333;
    border-collapse: separate; /* empty-cells has effect when not collapsed */
    border-spacing: 0;
    background: #fff;
}

.example caption {
    text-align: left;
    font-weight: 600;
    padding: 8px 12px;
    background: #f3f3f3;
    border-bottom: 1px solid #ddd;
}

.example td {
    border: 1px solid #666;
    padding: 10px 12px;
    min-width: 60px;
    height: 44px;
    background: #fff;
}

/* Demonstrate the empty-cells property */
.example.show {
    empty-cells: show; /* borders/backgrounds are shown for empty cells */
}

.example.hide {
    empty-cells: hide; /* borders/backgrounds are hidden for empty cells */
}

.note {
    margin-top: 12px;
    color: #444;
    font-size: 0.95rem;
}

Result

Editor

Browser Support

The following information will show you the current browser support for the CSS empty-cells property. Hover over a browser icon to see the version that first introduced support for this CSS property.