¿Cómo simulo varios títulos de tabla?

Question

Estoy tratando de hacer una tabla CSS que (para fines de diseño) tiene un título en la parte superior e inferior.

Desafortunadamente, as far as I can tell, display: table-caption combina todo en un solo espacio en la parte superior. Esto significa que solo se muestra el título "encabezado".

I've tried treating them as rows instead, pero por alguna razón, sus anchos se unen a la de la primera columna de la tabla. (¿Estoy haciendo algo mal aquí?) Lo mismo sucede si los hago regulares div s con sus anchuras establecidas en 100%.

¿Hay alguna otra manera, quizás más elegante, de tener varios títulos de tabla? ¿He cometido algún error estúpido en mis intentos que está arruinando el diseño?

Answer 1

Dado que está utilizando CSS para el diseño (esto no es datos tabulares), entonces no hay razón para usar display:table-caption para el pie de página. Simplemente haga un div regular cuyo ancho esté configurado de la misma manera que la tabla (o llene un contenedor que encoja la tabla).

Editar: He aquí un ejemplo actualización: http://jsfiddle.net/fCTpR/1/