Jak mogę symulować wiele podpisów tabel?

Question

Próbuję utworzyć tabelę CSS, która (dla celów układu) ma podpis na górze i na dole.

Niestety, as far as I can tell, display: table-caption łączy wszystko w jedną przestrzeń u góry. Oznacza to, że wyświetlany jest tylko nagłówek "nagłówka".

I've tried treating them as rows instead, ale z jakiegoś powodu ich szerokości wiążą się z wartościami z pierwszej kolumny tabeli. (Czy robię coś źle?) To samo dzieje się, gdy robię je regularne div s z ich szerokościami ustawionymi na 100%.

Czy istnieje inny, być może bardziej elegancki sposób na podpisy pod wieloma tabelami? Czy popełniłem jakiś głupi błąd w moich próbach, które psują układ?

Answer 1

Ponieważ używasz CSS do układu (nie są to dane tabelaryczne), nie ma powodu, aby używać stopki jako display:table-caption. Po prostu utwórz zwykły element div, którego szerokość jest ustawiona tak samo, jak tabela (lub wypełnia kontener, który obkurcza się).

Edit: Oto zaktualizowana przykład: http://jsfiddle.net/fCTpR/1/