Re: [CSS21] Concern about anonymous table objects and whitespace

Tab Atkins Jr. wrote:
> I question, though, how common a bare table block with
> inappropriate children is, though.  As noted, the article that the
> author in question took his technique from does it *correctly* with a
> table block having table-cell children.

FWIW I've occasionally used this to achieve a (relatively) neutral 
in-flow block formatting context in places where overflow is 
inappropriate.  (Actually, it's not the table but the implied table-cell 
that's the BFC, but a lone display:table-cell has much less 
cross-browser consistency in the pre--bleeding-edge versions of the 
major browsers.)  I give IE<=7 hasLayout instead, which achieves a 
rather similar, but not identical, effect.

In the browsers mentioned, this technique seemed to have little or no 
side-effects on the descendants of the display:table, whilst actually 
specifying display:table-row or display:table-cell on these elements 
produced very different renderings.  I haven't checked this for a while 
though, certainly not in the very latest versions of the browsers.

However, I would never view this "technique" as anything other than 
purely experimental.  Anyone using the display:table* properties in ways 
for which they were clearly not intended cannot then complain if 
rendering becomes inconsistent or broken in future browsers.

> I *suspect* that by far the most common 'weird' use of the table-*
> display types will be people placing table-cells in inappropriate
> places, but the current repair rules fix those issues.  Does anybody
> know if other weird uses are common, similar to the existing examples
> in the css table spec?  (Both of those examples would render
> incorrectly with my algorithm.)

One rather fun effect achieved through the use of display:table-cell is 
horizontally-scrollable slideshows:[1]

#container {overflow: auto;}
#container1 > .slide {display: table-cell;}

This effect can also be achieved by setting the slides to 
display:inline-block and the container to white-space:nowrap.  Both 
approaches are rather hacky.  Off-topic, but is there a CSS3 approach to 
this which is less hacky?

Cheers,
Anton Prowse
http://dev.moonhenge.net

[1] 
http://dev.moonhenge.net/css21/test-cases/tables/table-cell-slideshows.html

Received on Saturday, 24 January 2009 09:24:37 UTC