display: table
display: table and related values recreate table-like layout behavior in CSS. They can align rows and columns without actual table markup, but should be used cautiously.
Browser support
| Feature | Desktop | Mobile | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
css.properties.display.inline-table | 1 | 12 | 3 | 1 | 18 | 1 |
| CSS property | ||||||
table | 1 | 12 | 1 | 1 | 18 | 1 |
table-caption | 1 | ≤15 | 1 | ≤4 | 18 | ≤3.2 |
table-cell | 1 | 12 | 1 | 1 | 18 | 1 |
table-column | 1 | 12 | 1 | 1 | 18 | 1 |
table-column-group | 1 | 12 | 1 | 1 | 18 | 1 |
table-footer-group | 1 | 12 | 1 | 1 | 18 | 1 |
table-header-group | 1 | 12 | 1 | 1 | 18 | 1 |
table-row | 1 | 12 | 1 | 1 | 18 | 1 |
table-row-group | 1 | 12 | 1 | 1 | 18 | 1 |
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)
Syntax
CSS
.table { display: table; width: 100%; }
.row { display: table-row; }
.cell {
display: table-cell;
vertical-align: middle;
}Live demo
Use cases
-
Legacy alignment patterns
Mimic table row and cell sizing behavior when maintaining older layouts.
-
Column consistency
Keep sibling regions aligned when the layout benefits from table-style sizing rules.
Cautions
- CSS table display is a layout tool only and should not replace semantic table markup for real tabular data.
- Modern layout systems are often easier to maintain and reason about.
Accessibility
- Do not rely on CSS table display to convey data relationships; use real tables when headers and cells matter semantically.