How do I simulate multiple table captions?

Question

I'm trying to make a CSS table that (for layout purposes) has a caption at the top and bottom.

Unfortunately, as far as I can tell, display: table-caption merges everything into a single space at the top. This means that only the "header" caption is actually displayed.

I've tried treating them as rows instead, but for some reason, their widths bind to that of the first table column. (Am I doing something wrong here?) The same happens if I make them regular divs with their widths set to 100%.

Is there another, perhaps more elegant way to have multiple table captions? Have I made some stupid error in my attempts that's screwing up the layout?

Answer 1

Since you're using CSS for layout (this is not tabular data) then there's no reason to use display:table-caption for the footer. Just make a regular div whose width is set to the same as the table (or fills a container that shrink-wraps the table).

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