display

Description
Syntax
Examples
Links

Description

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

1 · display-box · contents

2 · display-box · none

3 · display-box · JS

4 · display-inside · flex

5 · display-inside · flow

6 · display-inside · flow-root

7 · display-inside · grid

8 · display-inside · ruby

9 · 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>

10 · display-inside · JS

11 · display-internal · ruby-base

12 · display-internal · ruby-base-container

13 · display-internal · ruby-text

14 · display-internal · ruby-text-container

15 · 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>

16 · 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>

17 · 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>

18 · display-internal · table-column-group

20 · display-internal · table-header-group

21 · display-internal · table-row

22 · display-internal · table-row-group

23 · display-internal · ruby · JS

<!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>
</head>
<body>
    <button>initial</button>
    <button>ruby</button>
    <button value="rubyBase">ruby-base</button>
    <button value="rubyBaseContainer">ruby-base-container</button>
    <button value="rubyText">ruby-text</button>
    <button 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>
    <script>
        function myfunction(myparameter)
        {
            const mytarget = myparameter.target;
            const myproperty = mytarget.value || mytarget.innerHTML;
            for(const mydiv of document.querySelectorAll("div"))
            {
                mydiv.style.backgroundColor = "transparent";
                if(mydiv.getAttribute("class") == myproperty)
                {
                    mydiv.style.backgroundColor = "yellow";
                }
            }
        }
        for(const mybutton of document.querySelectorAll("button"))
        {
            mybutton.addEventListener("mouseover", myfunction);
        }
    </script>
</body>
</html>

24 · display-internal · table · JS

<!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>
</head>
<body>
    <button>initial</button>
    <button>table</button>
    <button value="tableCaption">table-caption</button>
    <button value="tableCell">table-cell</button>
    <button value="tableColumn">table-column</button>
    <button value="tableColumnGroup">table-column-group</button>
    <button value="tableFooterGroup">table-footer-group</button>
    <button value="tableHeaderGroup">table-header-group</button>
    <button value="tableRow">table-row</button>
    <button 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>
    <script>
        function myfunction(myparameter)
        {
            const mytarget = myparameter.target;
            const myproperty = mytarget.value || mytarget.innerHTML;
            for(const mydiv of document.querySelectorAll("div"))
            {
                mydiv.style.backgroundColor = "transparent";
                if(mydiv.getAttribute("class") == myproperty)
                {
                    mydiv.style.backgroundColor = "yellow";
                }
            }
        }
        for(const mybutton of document.querySelectorAll("button"))
        {
            mybutton.addEventListener("mouseover", myfunction);
        }
    </script>
</body>
</html>

25 · display-legacy · inline-block

26 · display-legacy · inline-flex

27 · display-legacy · inline-grid

28 · 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>