How (And Why) to Use Display: Table-Cell (CSS)

How (and why) to use display: table-cell (CSS)

After days trying to find the answer, I finally found

display: table;

There was surprisingly very little information available online about how to actually getting it to work, even here, so on to the "How":

To use this fantastic piece of code, you need to think back to when tables were the only real way to structure HTML, namely the syntax. To get a table with 2 rows and 3 columns, you'd have to do the following:

<table>
    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>
</table>

Similarly to get CSS to do it, you'd use the following:

HTML

<div id="table">
    <div class="tr">
        <div class="td"></div>
        <div class="td"></div>
        <div class="td"></div>
    </div>
    <div class="tr">
        <div class="td"></div>
        <div class="td"></div>
        <div class="td"></div>
    </div>
</div>

CSS

#table{ 
    display: table; 
}
.tr{ 
    display: table-row; 
}
.td{ 
    display: table-cell; }

As you can see in the example below, the divs in the 3rd column have no content, yet are respecting the auto height set by the text in the first 2 columns. WIN!

#table {
    display: table;
    padding: 5px;
}
.tr {
    display: table-row;
    padding: 5px;
}
.td {
    display: table-cell;
    padding: 5px;
    width: 150px;
    border: #000000 solid 1px;
    margin: 5px;
}

<div id="table">
    <div class="tr">
        <div class="td">Row 1,
            <br />Column 1</div>
        <div class="td">Row 1, Column 2</div>
        <div class="td" style="background:#888888;"></div>
    </div>
    <div class="tr">
        <div class="td">Row 2,
            <br />Column 1</div>
        <div class="td">Row 2, Column 2</div>
        <div class="td" style="background:#888888;"></div>
    </div>
</div>

What does display: table-column do?

Whilst you're correct they simply define the styles for every td and th within that column, they themselves technically do have a display mode because it's the display: table-column that gives them this ability.

If you set a <col> to be display: none, the corresponding table elements no longer have the styles applied that were set in the col (Try it in this Fiddle).

Personally, I feel it's a bit of a hacky way that allows a HTML element to behave like a set of CSS rules to dictate the styles of a table's contents.

Styling CSS tables where display: table-row is used

Unless the borders are collapsed, table rows don't have borders, they just hold the table cells (which can have borders) in place.

Set border-collapse: collapse.

section {  border-collapse: collapse;}
.table_row_line {  border: 2px solid darkgrey;  width: 100%;  height: 100%;  padding: 5px;}

<section style="display: table;">  <header class="table_row_line" style="display: table-row;">    <div style="display: table-cell;">1</div>    <div style="display: table-cell;">2</div>    <div style="display: table-cell;">3</div>  </header>  <div style="display: table-row;">    <div style="display: table-cell;">4</div>    <div style="display: table-cell;">5</div>    <div style="display: table-cell;">6</div>  </div></section>

How is a CSS display: table-column supposed to work?

The CSS table model is based on the HTML table model
http://www.w3.org/TR/CSS21/tables.html

A table is divided into ROWS, and each row contains one or more cells. Cells are children of ROWS, they are NEVER children of columns.

"display: table-column" does NOT provide a mechanism for making columnar layouts (e.g. newspaper pages with multiple columns, where content can flow from one column to the next).

Rather, "table-column" ONLY sets attributes that apply to corresponding cells within the rows of a table. E.g. "The background color of the first cell in each row is green" can be described.

The table itself is always structured the same way it is in HTML.

In HTML (observe that "td"s are inside "tr"s, NOT inside "col"s):

<table ..>
  <col .. />
  <col .. />
  <tr ..>
    <td ..></td>
    <td ..></td>
  </tr>
  <tr ..>
    <td ..></td>
    <td ..></td>
  </tr>
</table>

Corresponding HTML using CSS table properties (Note that the "column" divs do not contain any contents -- the standard does not allow for contents directly in columns):

.mytable {  display: table;}.myrow {  display: table-row;}.mycell {  display: table-cell;}.column1 {  display: table-column;  background-color: green;}.column2 {  display: table-column;}

<div class="mytable">  <div class="column1"></div>  <div class="column2"></div>  <div class="myrow">    <div class="mycell">contents of first cell in row 1</div>    <div class="mycell">contents of second cell in row 1</div>  </div>  <div class="myrow">    <div class="mycell">contents of first cell in row 2</div>    <div class="mycell">contents of second cell in row 2</div>  </div></div>

Margin for element in div with display:table-cell moves content in other cell

Add the vertical-align: top property to the table-cells:

.container {  display: table;  border: 1px silver solid;}.container div {  display: table-cell;  padding: 10px;  vertical-align: top;}.more {  display: block;  border: 2px red solid;  margin-top: 20px;}

<div class="container">  <div>    Some jumping content here  </div>  <div>    <a href="#" class="more">More</a>  </div></div>

Using display: table-cell is there a way of getting the colspan functionality?

No you cannot add colspan or rowspan to display:table-cell. It is one of the limitations in table-cell feature!

You can check the limitations in this reference link

http://www.onenaught.com/posts/201/use-css-displaytable-for-layout

If you want to bring the COLSPAN feature into table-cell, then you have to use table-row-group and table-caption feature as follows

display: table-caption

and

table-row-group;

Check this fiddle link : http://jsfiddle.net/ZQQY4/

What is the difference between the table element and CSS display:table

Yes, there are differences between using <table> and using <div style="display:table">.

Differences in styling

Every element has its own default set of styles. Changing one style property (in this case, display) doesn't change the other properties, so you'll have to put those in explicitly if you want to emulate a real table.

Property in table in div (with display:table)
border-spacing 2px 0px
box-sizing border-box¹ content-box
border-color #808080² same as currentColor
Property in caption in div (with display:table-caption)
text-align center start
Property in tbody in div (with display:table-row-group)
vertical-align middle baseline
border-color #808080² same as currentColor
Property in th in div (with display:table-cell)
font-weight 700 400
padding: 1px 0px
text-align center start
vertical-align middle baseline
Property in td in div (with display:table-cell)
padding: 1px 0px
vertical-align middle baseline

¹ Mozilla only

² Chrome only

So a stylesheet for a proper CSS table needs to contain at least the following:

.table {display:table; border-spacing:2px;}
.caption {display: table-caption; text-align:center;}
.colgroup {display:table-column-group}
.col {display:table-column}
.thead {display:table-header-group; vertical-align:middle;}
.tbody {display:table-row-group; vertical-align:middle;}
.tfoot {display:table-footer-group; vertical-align:middle;}
.tr {display:table-row;}
.th {display:table-cell; vertical-align:middle; padding:1px;
     text-align:center; font-weight:700;}
.td {display:table-cell; vertical-align:middle; padding:1px;}

Differences in attributes

Table elements have more attributes than plain divs.

table
border Draws outset border, and inset borders around all cells
sortable Enables a sorting interface for the table
colgroup
span Number of columns spanned by the element
col
span Number of columns spanned by the element
th
colspan Number of columns that the cell is to span
rowspan Number of rows that the cell is to span
headers The header cells for this cell
scope Specifies which cells the header cell applies to
abbr Alternative label to use for the header cell
sorted Column sort direction and ordinality
td
colspan Number of columns that the cell is to span
rowspan Number of rows that the cell is to span
headers The header cells for this cell

Differences in markup

In tables, the elements colgroup, thead, tbody, tfoot, tr, th and td have optional end tags. With div, you have no such luxury and you will need to write out all end tags in full.

In addition, tbody also has an optional start tag. That means a table with only tr and no tbody elements in the markup will have a tbody in the DOM tree.

This may not seem to matter much, but there are subtle differences in the results under some circumstances.

Given the above CSS and the following markup

<table>
 <tr>
  <td style="vertical-align:inherit">1</td>
  <td>1<br>2</td>
 </tr>
</table>
<hr>
<div class="table">
 <div class="tr">
  <div class="td" style="vertical-align:inherit">1</div>
  <div class="td">1<br>2</div>
 </div>
</div>

the table cells in the actual table will be vertically aligned to the middle (because they inherit from the tbody), but not in the CSS table, where there is no tbody to inherit from. Keep that in mind when writing your HTML.

Differences in the JavaScript interface

Table nodes have more properties:

createCaption(), deleteCaption(), createTHead(), deleteTHead(), createTFoot(), deleteTFoot(), createTBody(), insertRow(), deleteRow(), caption, tHead, tFoot, tBodies[], rows[], border, frame, rules, summary, width, bgColor, cellPadding, cellSpacing which, hopefully, speak for themselves.

That's about it. Differences in performance are negligible.

CSS: prevent column from growing in display: table

You could give a width of 0px to all of your cells in the first-column. When the content is larger than the specified width, then the width argument is ignored. The cell with the largest content will determine the total width of the first column.

.table {
  display: table;
  width: 100%;
}

.table-row {
  display: table-row;
}

.table-cell {
  display: table-cell;
}

.table-cell.a {
  width: 0px;
}

<div class='table'>
  <div class='table-row'>
    <div class='table-cell a'>a1</div>
    <div class='table-cell b'>b1</div>
  </div>
  <div class='table-row'>
    <div class='table-cell a'>a2</div>
    <div class='table-cell b'>b2</div>
  </div>
</div>

Div not centered when using display: table-cell

Just add margin: 0 auto;.. Working right.

html {  display: table;  height: 100%;  width: 100%;  text-align: center;}body {  display: table-cell;  vertical-align: middle;}.hidden {  display: none;}.leaf {  border-radius: 15px 2px 15px 2px;  border: 1px solid green;  background-color: green;  width: 250px;  height: 80px;  margin:0 auto;
}

<div class="leaf">Why am I not centered?</div><p>And why am I centered?</p>

How (And Why) to Use Display: Table-Cell (CSS)