Tee G. Peng wrote:
Hi, can you please tell me how to use these table display values in
non-table layout, better yet if you can show me examples. I
understand the concept but I don't know how and when to use them in
CSS layout with selectors.
CSS 2.1 about 'CSS tables'...
<http://www.w3.org/TR/CSS21/tables.html>
Example of a 'CSS table' layout - with 'simulated look' in IE/win.
<http://www.gunlaug.no/tos/moa_11.html>
My curiosity derives from examples I see here an there, for example,
Georg made an example
#preview_pic {margin: 10px auto; float: none; display: table; width:
1%;}
on Centering an image thread.
The example isn't a complete solution, as it contains only the styles
needed to correct and override existing styles in a non-working page
presented on [css-d], IIRC.
It was all about centering a complete div-container set with a
shadow-effect around a replaceable image.
To dissect it...
margin: 10px auto; = normal block-centering.
float: none; = overriding existing float-declaration (used in the
non-working page).
display: table; = making the element shrink to size of inner-element,
and auto-expand if the inner-element - and the size of it - is changed.
That's how a normal HTML table would behave, so the example is just
replicating that behavior.
width: 1%; = giving IE/win a 'hasLayout' trigger, and providing a
"non-disturbing" min-width for the #preview_pic element.
One time I saw a
#id { display: table-row}
From CSS 2.1...
"table-row (In HTML: TR)
Specifies that an element is a row of cells."
The examples I see from CSS, the definitive guide, these values are
in chapter 11, table layout with XML examples.
Also, are they supported by IE 6 and below?
No, and IE7 doesn't support any part of 'CSS table' either. Maybe IE8
will :-)
We can use the proprietary 'hasLayout'[1] behavior to simulate some 'CSS
table' behavior, and we can "fake" some other parts in IE/win.
We can *not* simulate all parts of a standard 'CSS table' in any IE/win
version.
Despite the lack of support in IE/win, parts of 'CSS table' are useful
for getting specific behavior/line-up in standard-compliant browsers.
I have some examples of workarounds for cases when we can't avoid
triggering 'hasLayout'[1] in IE/win - a kind of 'reverse engineering'...
<http://www.gunlaug.no/contents/wd_example_01.html>
regards
Georg
[1]http://www.satzansatz.de/cssd/onhavinglayout.html
--
http://www.gunlaug.no
******************************************************
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list & getting help
******************************************************
