The CSS display property allows you to set up rules for display that make your content display as a grid or as if it were a table, when in fact the material is not a table. Using CSS to create a grid layout gives you control over the layout without putting any table tags into the HTML. The display properties that relate to a table-like appearance, including each possible property and value, will be described in this article.
display:table
Makes the element act like a table element. If you nest rows or columns of grids within this element, you should use one or more of the properties described next.
display:table-row
Makes the element act like a table row element. It is possible to use display:table-row effectively without having it nested in an element set to display:table. This is because the browser assumes the existence of an "anonymous" table element and behaves as if it were there. (See Tips below for more about "anonymous" elements.) Remember, you aren't creating an actual table of tabular data; you are merely creating a grid-like display.
display:table-cell
Makes the element act like a table cell element. It is possible to use display:table-cell effectively without having the element nested in an element set to display:table-row or display:table.
display:table-row-group
Makes the element act like a table row group element. Use it for an element that groups one or more rows. It's the CSS way of expressing what tbody does in HTML.
display:table-header-group
Makes the element act like a table header row group element. It's the CSS way of expressing what thead does in HTML. With CSS, the table-header-group is always displayed before all other rows and rowgroups and after any top captions.
display:table-footer-group
Makes the element act like a table footer row group element. With CSS, the table-footer-group does what tfoot does in HTML. The table-footer-group is always displayed after all other rows and rowgroups and before any bottom captions. Printers may repeat footer rows on each page spanned by a table.
display:table-caption
Makes the element act like a table caption element.
display:table-column
Makes the element act like a table column element. It's the CSS way of expressing what col does in HTML.
display:table-column-group
Makes the element act like a table column group. Use it to group one or more columns. It's the CSS way of expressing what colgroup does in HTML.
