Setting width for display: table

Question

Hi,

I'm trying to create a layout with display: table and alike, but it seems that display: table-row and others do not respect width property. Is there a way to over come with this?

Answer 1

Are you using inline propery for them? Just give them display:block css property and then width should be applicable.

Answer 2

This is because a display:table-row doesn't have a width.

To resolve, you need to have elements inside there with display: table-cell that have widths.

You can see W3C for a full list of specs, or...just try to think of it as a <tr>, it behaves the same way.

Answer 3

I'm pretty sure that table-row's must be have a width of 100% of the containing table. If you have variable width rows... it wouldn't look much like a table really. You could try setting the width of the table itself, or of the table-cell's.