CSS display table vs normal HTML Table

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.

"for some reason" = can we ask why? CSS is definitely not a 1:1 replacement for the USES of a proper table. — DA.
– DA., Commented Nov 2, 2011 at 22:54
I have a table and then embedded tables in rows and inside them are forms. I have problems with styling of the embedded tables. — Robert Niestroj
– Robert Niestroj, Commented Nov 3, 2011 at 7:43

Alexey Ivanov · Accepted Answer · 2011-11-02 22:51:38Z

3

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/

answered Nov 2, 2011 at 22:51

Alexey Ivanov

8,2562 gold badges29 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Robert Niestroj Over a year ago

Can i do in this CSS tables things like colspan and rowspan?

Alexey Ivanov Over a year ago

Unfortunately, I don't know a way how to do it.

FelipeAls Over a year ago

No you can't have equivalent of colspan and rowspan

Collectives™ on Stack Overflow

CSS display table vs normal HTML Table

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related