Comments on: Why display: table shouldn’t be frowned upon

By: Steve

Steve — Mon, 12 Dec 2011 20:27:13 +0000

I have noticed a weirdness that if I want to vertically align content in a table-cell, I need to specify an absolute height: no 100% or min-height.

http://jsfiddle.net/smlombardi/LnD3b/11/

Anyone else? Workarounds? I don’t want to have to specify a height.

By: Catalin

Catalin — Tue, 25 Oct 2011 07:00:19 +0000

Thanks, usefull

By: Erik

Erik — Thu, 09 Jun 2011 18:31:06 +0000

In fact NOT using tables to display tabular data is bad. The whole point is whether a screen reader can figure out what it’s looking at based on your markup. A bunch of divs or lists used improperly is poor practice.

By: Iouri Goussev

Iouri Goussev — Thu, 23 Dec 2010 11:47:27 +0000

Of course using tables instead of CSS to display tabular data, is not a sin either.

By: Vali

Vali — Tue, 07 Dec 2010 17:10:55 +0000

thz, you made my evening better :)
ups…

By: Jonathan

Jonathan — Tue, 16 Jun 2009 14:21:37 +0000

Sweet. Thanks for sharing :)

By: The Css Ninja

The Css Ninja — Fri, 12 Jun 2009 01:18:59 +0000

Thanks for comment Jonathan. You are correct that this will cut off any content that flows past the current window height. Luckily this can be fixed and I have updated the demo files and the source download, I will also update the article when I have more time. You can view the overflow example here. This hasn't been thoroughly tested but it works in Safari 4, FF3/2/1.5 and IE8. The changes made was removing the overflow: hidden from the html, body selector as this was causing the overflow to be hidden and was unnecessary. I added another container inside the #content container and gave it display: table-cell so padding could be applied, table-row will ignore padding.

By: Jonathan

Jonathan — Thu, 11 Jun 2009 14:39:35 +0000

I was a little skeptical of the first fluid layout and its ability to support more content than the browser height. I added more content and (as expected) it runs off the paged without the vertical scroll-bar.

Have you found a way to enable the scroll-bar when needed by the content?

I’m using Firefox 3.0.10