Display: table-cell in css-tables


Table-cell divs and a wrapper set to display:table; width:100%
As pointed out by Beverleyh in this thread from DynamicDrive, table-cell divs (display: table-cell) need a wrapper set to display:table; width:100% in order for width settings (applied to the cells) to have the required effect. Without the wrapper, the table-cells may collapse, only being as wide as their content needs them to be. The cells will certainly collapse when they have little or no content. This can be demonstrated with the following example (by Beverleyh):
Click on code to see result
<div style="display: table-cell; width: 20%; border: 1px solid black; border-right: 0; padding: 3px"> one </div>
<div style="display: table-cell; width: 20%; border: 1px solid black; border-right: 0; padding: 3px"> two </div>
<div style="display: table-cell; width: 20%; border: 1px solid black; border-right: 0; padding: 3px"> three </div>
<div style="display: table-cell; width: 20%; border: 1px solid black; border-right: 0; padding: 3px"> four </div>
<div style="display: table-cell; width: 20%; border: 1px solid black; padding: 3px"> five </div>

Note that if we put enough content in one of the table-cells to fill their defined width (here: 20%), then all the other tables-cells (regardless of their content) will divide the remaining width up amongst themselves. No collapsed table-cells:
Click on code to see result
<div style="display: table-cell; width: 20%; border: 1px solid black; border-right: 0; padding: 3px"> one </div>
<div style="display: table-cell; width: 20%; border: 1px solid black; border-right: 0; padding: 3px"> two </div>
<div style="display: table-cell; width: 20%; border: 1px solid black; border-right: 0; padding: 3px"> this is three this is three this is three this is three this is three this is three </div>
<div style="display: table-cell; width: 20%; border: 1px solid black; border-right: 0; padding: 3px"> four </div>
<div style="display: table-cell; width: 20%; border: 1px solid black; padding: 3px"> five </div>

But of course we don't want the size of the content in the table-cells to be a decisive factor here. That's where our wrapper comes in. Setting it to display: table; width: 100% will make sure that each table-cell has the required with, even if their content is small:
Click on code to see result
<div style="display: table; width: 100%; ">
<div style="display: table-cell; width: 20%; border: 1px solid black; border-right: 0; padding: 3px"> one </div>
<div style="display: table-cell; width: 20%; border: 1px solid black; border-right: 0; padding: 3px"> two </div>
<div style="display: table-cell; width: 20%; border: 1px solid black; border-right: 0; padding: 3px"> three </div>
<div style="display: table-cell; width: 20%; border: 1px solid black; border-right: 0; padding: 3px"> four </div>
<div style="display: table-cell; width: 20%; border: 1px solid black; padding: 3px"> five </div>
</div>

Specifying the table-cell's width
Now that we have a table div around our table-cell divs, we might think that their width-specifications are redundant. This is indeed the case in our last example. But we should realize that as soon as we put an element inside a table-cell that has its own horizontal space (like an image), the table-cell might get wider or narrower. To avoid this, we should always specify the width of the table-cells. If we want them to have equal horizontal space, we should apply the following:
width=(100/number_of_cells)%.

Images in table-cells
If a table-cell contains an image, the image should have style=width: 100% or less, otherwise the cell containing the image could be too wide and/or wouldn't adapt to the width of the screen. Moreover, the image will force the surrounding cells to have vertical-align: bottom by default in certain circumstances (for instance, if there's no <br> before the image in the cell). To avoid this problem, we should always give the table-cell containing the image vertical-align: top (if we want vertical alignment for all the cells). It wouldn't hurt to give all table-cells vertical-align: top
Example without vertical alignment:
Click on code to see result
<div style="display: table; width: 100%; ">
<div style="display: table-cell; width: 20%; border: 1px solid black; border-right: 0; padding: 3px"> one </div>
<div style="display: table-cell; width: 20%; border: 1px solid black; border-right: 0; padding: 3px"> two </div>
<div style="display: table-cell; width: 20%; border: 1px solid black; border-right: 0; padding: 3px"> <img src="http://wierdenland.nl/plinius.jpg" alt="" style="width: 100%" > </div>
<div style="display: table-cell; width: 20%; border: 1px solid black; border-right: 0; padding: 3px"> four </div>
<div style="display: table-cell; width: 20%; border: 1px solid black; padding: 3px"> five </div>
</div>

Example with vertical alignment:
Click on code to see result
<div style="display: table; width: 100%; ">
<div style="display: table-cell; width: 20%; border: 1px solid black; border-right: 0; padding: 3px"> one </div>
<div style="display: table-cell; width: 20%; border: 1px solid black; border-right: 0; padding: 3px"> two </div>
<div style="display: table-cell; width: 20%; border: 1px solid black; border-right: 0; padding: 3px; vertical-align: top"> <img src="http://wierdenland.nl/plinius.jpg" alt="" style="width: 100%" > </div>
<div style="display: table-cell; width: 20%; border: 1px solid black; border-right: 0; padding: 3px"> four </div>
<div style="display: table-cell; width: 20%; border: 1px solid black; padding: 3px"> five </div>
</div>

Padding-top
If a table-cell has a value for padding-top, the surrounding cells will automatically display the same padding behaviour. Here again, giving the cells vertical-align: top will undo this.

Summarizing
As shown above, table-cell divs having display: table-cell need a wrapper set to display:table; width:100% in order for width settings (applied to the cells) to have the required effect. Moreover, we should always specify the width of the table-cells and give the cells containing an image or having a value for padding-top: vertical-align: top. If we want vertical alignment for the cells as a default value, we could simply apply vertical-align: top to all the cells. (But see below for responsive css-tables).

Responsive css-tables
Giving table-cells the display value table-cell is not a good option for all screen widths because, on small screens, the cells should be vertically positioned with respect to each other for readability, not horizontally. And in that case, their width should not be too small since there will be nothing to the right of each table-cell.
So we need different styles for different screen sizes. This can be done with the help of media queries, implying that we should not use inline styles but a stylesheet (internal or external). Here's a possible stylesheet for a three column page containing images:
<style>
.wrapper_div {display: table; width: 100%}
.responsive_div {display: table-cell; width: 33%; margin-bottom: 0; padding-right: 40px; text-align: top}
img {width: 100%; margin-top: 10px; margin-bottom: 10px}
@media screen and (max-width: 899px)
{
.responsive_div {display: block; width: 100%; margin-bottom: 17px; padding-right: 0; }
img {width: 50%; margin-left: 25%}
}
This stylesheet tells us, among other things, that the table-cells (class="responsive_div") must be 33% wide and must have display: table-cell on screens that are more than 899px wide, and that images have 100% width on those screens. On screens that are less than 900px (899px and lower), the table-cells are 100% wide and have display: block (they are vertically positioned with respect to each other). The images on those screens are 50% wide and are horizontally centered (left: 25%).
Here's an example page using the stylesheet:
Click on code to see result
<!doctype html>
<html >

<head>

<title>3 columns</title>

<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<style>
body {font-family: verdana; font-size: 14px; padding: 10%; padding-top: 10px}
.wrapper_div {display: table; width: 100%}
.responsive_div {display: table-cell; width: 33%; margin-bottom: 0; padding-right: 40px; text-align: top}
img {width: 100%; margin-top: 10px; margin-bottom: 10px}
@media screen and (max-width: 899px)
{
.responsive_div {display: block; margin-bottom: 17px; padding-right: 0; width: 100%;}
img {width: 50%; margin-left: 25%}
}

</style>

</head>

<body>

<h2 style="text-align: center">Responsive; 3 columns</h2>
<br>

<div class="wrapper_div">

<div class="responsive_div">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.
<br>
<img src="http://www.rtvnoord.nl/content/groningeninbeeld/pics/winsum/groot/groot_20040425_Ezinge_museum_Wierdenland_VVV.jpg" alt="" ><br>
Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui.
</div>

<div class="responsive_div">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus.
<br>
<img src="https://www.kaartje2go.nl/kaarten/vrienden-voor-het-leven-7/img/vrienden-voor-het-leven-7.jpg" alt="">
<br>
Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui.
</div>

<div class="responsive_div" >
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus.
<br>
<img src="http://wierdenland.nl/plinius.jpg" alt="" >
<br>
Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. </div>

</div>

</body>

</html>


That's it.
Arie Molendijk, mesdomaines.nu