display

The display CSS property defines an element's display type.

Syntax

CSS

display: value;

JS

object.style.display = "value";

Values

<'display'> = [ <display-outside> || <display-inside> ] | <display-listitem> | <display-internal> | <display-box> | <display-legacy>

<display-outside> = block | inline | run-in

block

Generates a box that is block-level when placed in flow layout.

inline

Generates a box that is inline-level when placed in flow layout.

run-in

Generates an run-in box, which is a type of inline-level box with special behavior that attempts to merge it into a subsequent block container.

<display-inside> = flow | flow-root | table | flex | grid | ruby

flow

Lays out its contents using flow layout.

flow-root

Generates a block container box and lays out its contents using flow layout.

table

Generates a principal table wrapper box that establishes a block formatting context and which contains an additionally-generated table grid box that establishes a table formatting context.

flex

Generates a principal flex container box and establishes a flex formatting context.

grid

Generates a principal grid container box and establishes a grid formatting context.

ruby

Generates a ruby container box and establishes a ruby formatting context in addition to integrating its base-level contents into its parent formatting context if it is inline or generating a wrapper box of the appropriate outer display type if it is not inline.

<display-listitem> = <display-outside>? && [ flow | flow-root ]? && list-item

<display-outside> = block | inline | run-in

block

Generates a box that is block-level when placed in flow layout.

inline

Generates a box that is inline-level when placed in flow layout.

run-in

Generates an run-in box, which is a type of inline-level box with special behavior that attempts to merge it into a subsequent block container.

flow

Lays out its contents using flow layout.

flow-root

Generates a block container box and lays out its contents using flow layout.

list-item

Generates a ::marker pseudo-element with the content specified by its list-style properties together with a principal box of the specified type for its own contents.

<display-internal> = table-row-group | table-header-group | table-footer-group | table-row | table-cell | table-column-group | table-column | table-caption | ruby-base | ruby-text | ruby-base-container | ruby-text-container

table-row-group

Behaves as a tbody element.

table-header-group

Behaves as a thead element.

table-footer-group

Behaves as a tfoot element.

table-row

Behaves as a tr element.

table-cell

Behaves as a td element.

table-column-group

Behaves as a colgroup element.

table-column

Behaves as a col element.

table-caption

Behaves as a caption element.

ruby-base

Behaves as a rb element.

ruby-text

Behaves as a rt element.

ruby-base-container

Behaves as a rbc element.

ruby-text-container

Behaves as a rtc element.

<display-box> = contents | none

contents

Does not generate any boxes itself, but its children and pseudo-elements still generate boxes and text runs as normal.

none

Does not generate boxes or text runs.

<display-legacy> = inline-block | inline-table | inline-flex | inline-grid

inline-block

Behaves as inline flow-root.

inline-table

Behaves as inline table.

inline-flex

Behaves as inline flex.

inline-grid

Behaves as inline grid.

Initial

inline

Examples

display-box | contents

display-box | none

display-inside | flex

display-inside | flow

display-inside | flow-root

display-inside | grid

display-inside | ruby

display-inside | table

<!doctype html>
<html>
<head>
    <style>
        .table {
            background-color: yellow;
            display: table;
        }
        .tableCaption {
            display: table-caption;
        }
        .tableCell {
            display: table-cell;
        }
        .tableColumn {
            display: table-column;
        }
        .tableColumnGroup {
            display: table-column-group;
        }
        .tableFooterGroup {
            display: table-footer-group;
        }
        .tableHeaderGroup {
            display: table-header-group;
        }
        .tableRow {
            display: table-row;
        }
        .tableRowGroup {
            display: table-row-group;
        }
    </style>
</head>
<body>
    <div class="table">
        <div class="tableCaption">caption</div>
        <div class="tableColumnGroup">
            <div class="tableColumn"></div>
            <div class="tableColumn"></div>
        </div>
        <div class="tableColumn"></div>
        <div class="tableHeaderGroup">
            <div class="tableRow">
                <div class="tableCell">cell</div>
                <div class="tableCell">cell</div>
                <div class="tableCell">cell</div>
            </div>
        </div>
        <div class="tableRowGroup">
            <div class="tableRow">
                <div class="tableCell">cell</div>
                <div class="tableCell">cell</div>
                <div class="tableCell">cell</div>
            </div>
            <div class="tableRow">
                <div class="tableCell">cell</div>
                <div class="tableCell">cell</div>
                <div class="tableCell">cell</div>
            </div>
        </div>
        <div class="tableFooterGroup">
            <div class="tableRow">
                <div class="tableCell">cell</div>
                <div class="tableCell">cell</div>
                <div class="tableCell">cell</div>
            </div>
        </div>
    </div>
</body>
</html>

display-internal | ruby-base

display-internal | ruby-base-container

display-internal | ruby-text

display-internal | ruby-text-container

display-internal | table-caption

<!doctype html>
<html>
<head>
    <style>
        .table {
            display: table;
        }
        .tableCaption {
            background-color: yellow;
            display: table-caption;
        }
        .tableCell {
            display: table-cell;
        }
        .tableColumn {
            display: table-column;
        }
        .tableColumnGroup {
            display: table-column-group;
        }
        .tableFooterGroup {
            display: table-footer-group;
        }
        .tableHeaderGroup {
            display: table-header-group;
        }
        .tableRow {
            display: table-row;
        }
        .tableRowGroup {
            display: table-row-group;
        }
    </style>
</head>
<body>
    <div class="table">
        <div class="tableCaption">caption</div>
        <div class="tableColumnGroup">
            <div class="tableColumn"></div>
            <div class="tableColumn"></div>
        </div>
        <div class="tableColumn"></div>
        <div class="tableHeaderGroup">
            <div class="tableRow">
                <div class="tableCell">cell</div>
                <div class="tableCell">cell</div>
                <div class="tableCell">cell</div>
            </div>
        </div>
        <div class="tableRowGroup">
            <div class="tableRow">
                <div class="tableCell">cell</div>
                <div class="tableCell">cell</div>
                <div class="tableCell">cell</div>
            </div>
            <div class="tableRow">
                <div class="tableCell">cell</div>
                <div class="tableCell">cell</div>
                <div class="tableCell">cell</div>
            </div>
        </div>
        <div class="tableFooterGroup">
            <div class="tableRow">
                <div class="tableCell">cell</div>
                <div class="tableCell">cell</div>
                <div class="tableCell">cell</div>
            </div>
        </div>
    </div>
</body>
</html>

display-internal | table-cell

<!doctype html>
<html>
<head>
    <style>
        .table {
            display: table;
        }
        .tableCaption {
            display: table-caption;
        }
        .tableCell {
            background-color: yellow;
            display: table-cell;
        }
        .tableColumn {
            display: table-column;
        }
        .tableColumnGroup {
            display: table-column-group;
        }
        .tableFooterGroup {
            display: table-footer-group;
        }
        .tableHeaderGroup {
            display: table-header-group;
        }
        .tableRow {
            display: table-row;
        }
        .tableRowGroup {
            display: table-row-group;
        }
    </style>
</head>
<body>
    <div class="table">
        <div class="tableCaption">caption</div>
        <div class="tableColumnGroup">
            <div class="tableColumn"></div>
            <div class="tableColumn"></div>
        </div>
        <div class="tableColumn"></div>
        <div class="tableHeaderGroup">
            <div class="tableRow">
                <div class="tableCell">cell</div>
                <div class="tableCell">cell</div>
                <div class="tableCell">cell</div>
            </div>
        </div>
        <div class="tableRowGroup">
            <div class="tableRow">
                <div class="tableCell">cell</div>
                <div class="tableCell">cell</div>
                <div class="tableCell">cell</div>
            </div>
            <div class="tableRow">
                <div class="tableCell">cell</div>
                <div class="tableCell">cell</div>
                <div class="tableCell">cell</div>
            </div>
        </div>
        <div class="tableFooterGroup">
            <div class="tableRow">
                <div class="tableCell">cell</div>
                <div class="tableCell">cell</div>
                <div class="tableCell">cell</div>
            </div>
        </div>
    </div>
</body>
</html>

display-internal | table-column

<!doctype html>
<html>
<head>
    <style>
        .table {
            display: table;
        }
        .tableCaption {
            display: table-caption;
        }
        .tableCell {
            display: table-cell;
        }
        .tableColumn {
            background-color: yellow;
            display: table-column;
        }
        .tableColumnGroup {
            display: table-column-group;
        }
        .tableFooterGroup {
            display: table-footer-group;
        }
        .tableHeaderGroup {
            display: table-header-group;
        }
        .tableRow {
            display: table-row;
        }
        .tableRowGroup {
            display: table-row-group;
        }
    </style>
</head>
<body>
    <div class="table">
        <div class="tableCaption">caption</div>
        <div class="tableColumnGroup">
            <div class="tableColumn"></div>
            <div class="tableColumn"></div>
        </div>
        <div class="tableColumn"></div>
        <div class="tableHeaderGroup">
            <div class="tableRow">
                <div class="tableCell">cell</div>
                <div class="tableCell">cell</div>
                <div class="tableCell">cell</div>
            </div>
        </div>
        <div class="tableRowGroup">
            <div class="tableRow">
                <div class="tableCell">cell</div>
                <div class="tableCell">cell</div>
                <div class="tableCell">cell</div>
            </div>
            <div class="tableRow">
                <div class="tableCell">cell</div>
                <div class="tableCell">cell</div>
                <div class="tableCell">cell</div>
            </div>
        </div>
        <div class="tableFooterGroup">
            <div class="tableRow">
                <div class="tableCell">cell</div>
                <div class="tableCell">cell</div>
                <div class="tableCell">cell</div>
            </div>
        </div>
    </div>
</body>
</html>

display-internal | table-column-group

display-internal | table-footer-group

display-internal | table-header-group

display-internal | table-row

display-internal | table-row-group

display-legacy | inline-block

display-legacy | inline-flex

display-legacy | inline-grid

display-legacy | inline-table

<!doctype html>
<html>
<head>
    <style>
        .inlineTable {
            background-color: yellow;
            display: inline-table;
        }
        .tableCaption {
            display: table-caption;
        }
        .tableCell {
            display: table-cell;
        }
        .tableColumn {
            display: table-column;
        }
        .tableColumnGroup {
            display: table-column-group;
        }
        .tableFooterGroup {
            display: table-footer-group;
        }
        .tableHeaderGroup {
            display: table-header-group;
        }
        .tableRow {
            display: table-row;
        }
        .tableRowGroup {
            display: table-row-group;
        }
    </style>
</head>
<body>
    <div class="inlineTable">
        <div class="tableCaption">caption</div>
        <div class="tableColumnGroup">
            <div class="tableColumn"></div>
            <div class="tableColumn"></div>
        </div>
        <div class="tableColumn"></div>
        <div class="tableHeaderGroup">
            <div class="tableRow">
                <div class="tableCell">cell</div>
                <div class="tableCell">cell</div>
                <div class="tableCell">cell</div>
            </div>
        </div>
        <div class="tableRowGroup">
            <div class="tableRow">
                <div class="tableCell">cell</div>
                <div class="tableCell">cell</div>
                <div class="tableCell">cell</div>
            </div>
            <div class="tableRow">
                <div class="tableCell">cell</div>
                <div class="tableCell">cell</div>
                <div class="tableCell">cell</div>
            </div>
        </div>
        <div class="tableFooterGroup">
            <div class="tableRow">
                <div class="tableCell">cell</div>
                <div class="tableCell">cell</div>
                <div class="tableCell">cell</div>
            </div>
        </div>
    </div>
</body>
</html>

display-listitem | list-item

display-outside | block

display-outside | inline

display-outside | run-in

JS | display-box

JS | display-inside

JS | display-internal | ruby

<!doctype html>
<html>
<head>
    <style>
        .ruby {
            display: ruby;
        }
        .rubyBase {
            display: ruby-base;
        }
        .rubyBaseContainer {
            display: ruby-base-container;
        }
        .rubyText {
            display: ruby-text;
        }
        .rubyTextContainer {
            display: ruby-text-container;
        }
    </style>
    <script>
        function mouseover(value) {
            var elements = document.getElementsByTagName("div");
            for (var i = 0; i < elements.length; ++i) {
                elements[i].style.backgroundColor = "transparent";
                if (elements[i].getAttribute("class") == value) {
                    elements[i].style.backgroundColor = "yellow";
                }
            }
        }
    </script>
</head>
<body>
    <input onmouseover="mouseover(value)" type="button" value="initial">
    <input onmouseover="mouseover(value)" type="button" value="ruby">
    <button onmouseover="mouseover(value)" value="rubyBase">ruby-base</button>
    <button onmouseover="mouseover(value)" value="rubyBaseContainer">ruby-base-container</button>
    <button onmouseover="mouseover(value)" value="rubyText">ruby-text</button>
    <button onmouseover="mouseover(value)" value="rubyTextContainer">ruby-text-container</button><br>
    <div class="ruby">
        <div class="rubyBaseContainer">
            <div class="rubyBase">base</div>
            <div class="rubyBase">base</div>
            <div class="rubyBase">base</div>
        </div>
        <div class="rubyTextContainer">
            <div class="rubyText">text</div>
            <div class="rubyText">text</div>
            <div class="rubyText">text</div>
        </div>
    </div>
</body>
</html>

JS | display-internal | table

<!doctype html>
<html>
<head>
    <style>
        .table {
            display: table;
        }
        .tableCaption {
            display: table-caption;
        }
        .tableCell {
            display: table-cell;
        }
        .tableColumn {
            display: table-column;
        }
        .tableColumnGroup {
            display: table-column-group;
        }
        .tableFooterGroup {
            display: table-footer-group;
        }
        .tableHeaderGroup {
            display: table-header-group;
        }
        .tableRow {
            display: table-row;
        }
        .tableRowGroup {
            display: table-row-group;
        }
    </style>
    <script>
        function mouseover(value) {
            var elements = document.getElementsByTagName("div");
            for (var i = 0; i < elements.length; ++i) {
                elements[i].style.backgroundColor = "transparent";
                if (elements[i].getAttribute("class") == value) {
                    elements[i].style.backgroundColor = "yellow";
                }
            }
        }
    </script>
</head>
<body>
    <input onmouseover="mouseover(value)" type="button" value="initial">
    <input onmouseover="mouseover(value)" type="button" value="table">
    <button onmouseover="mouseover(value)" value="tableCaption">table-caption</button>
    <button onmouseover="mouseover(value)" value="tableCell">table-cell</button>
    <button onmouseover="mouseover(value)" value="tableColumn">table-column</button>
    <button onmouseover="mouseover(value)" value="tableColumnGroup">table-column-group</button>
    <button onmouseover="mouseover(value)" value="tableFooterGroup">table-footer-group</button>
    <button onmouseover="mouseover(value)" value="tableHeaderGroup">table-header-group</button>
    <button onmouseover="mouseover(value)" value="tableRow">table-row</button>
    <button onmouseover="mouseover(value)" value="tableRowGroup">table-row-group</button>
    <div class="table">
        <div class="tableCaption">caption</div>
        <div class="tableColumnGroup">
            <div class="tableColumn"></div>
            <div class="tableColumn"></div>
        </div>
        <div class="tableColumn"></div>
        <div class="tableHeaderGroup">
            <div class="tableRow">
                <div class="tableCell">cell</div>
                <div class="tableCell">cell</div>
                <div class="tableCell">cell</div>
            </div>
        </div>
        <div class="tableRowGroup">
            <div class="tableRow">
                <div class="tableCell">cell</div>
                <div class="tableCell">cell</div>
                <div class="tableCell">cell</div>
            </div>
            <div class="tableRow">
                <div class="tableCell">cell</div>
                <div class="tableCell">cell</div>
                <div class="tableCell">cell</div>
            </div>
        </div>
        <div class="tableFooterGroup">
            <div class="tableRow">
                <div class="tableCell">cell</div>
                <div class="tableCell">cell</div>
                <div class="tableCell">cell</div>
            </div>
        </div>
    </div>
</body>
</html>

JS | display-legacy

JS | display-listitem

JS | display-outside

Links

World Wide Web Consortium (W3C)

Jesus • Bible

HTML • CSS • JS • PHP • SVG • More

About • Terms