CSS显示表与普通HTML表

Question

For some reason I need to display tabular data in my web application but not using native, semantic table, thead, tbody, th, td tags. I found CSS properties that make html elements "look"/"behave" like tables:

http://www.quirksmode.org/css/display.html

http://www.w3schools.com/cssref/pr_class_display.asp

http://developer.practicalecommerce.com/articles/1941-CSS-display-table-display-table-row-and-display-table-cell-

I've tried out a small test, but can't figure out using least effort how to make a CSS table look like a native html table: http://jsfiddle.net/rniestroj/6Lyvm/ The columns completly do not align. Maybe I should somewhere apply display: table-column ? But where?

Or do I need more CSS and self sizing to make it look like the native table?

Or did I something misunderstood and it's not a 1:1 replacement?

Browser is Firefox 8.0b6.

Answer 1

The problem is with: .body and .footer divs. You don't assign style for them so they are rendered as "display: block"'s and break your layout. I added "display: table-row-group;" to .body , and "display: table-footer-group;" to .footer . This fixed it.

Example: http://jsfiddle.net/6Lyvm/9/