How to simulate multiple table headers?

Question

I am trying to create a CSS table that (for layout purposes) has a title above and below.

Unfortunately, as far as I can tell , display: table-caption merges everything into one space at the top. This means that only the title of the title is actually displayed.

I tried to treat them as rows instead , but for some reason their width is tied to the width of the first column of the table. (Am I doing something wrong here?) The same thing happens if I make them regular div with their width set to 100% .

Is there another, perhaps more elegant way to have multiple table headers? Did I make some stupid mistake in my attempts to lure the layout?

Answer 1

Since you are using CSS for the layout (this is not tabular data), then there is no reason to use display:table-caption for the footer. Just create a regular div whose width is set equal to the table (or fill the container that wraps the table).

Change Here's an updated example: http://jsfiddle.net/fCTpR/1/