DISPLAY

The display 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>