複数のテーブルキャプションをシミュレートするにはどうすればよいですか？

Question

私は（レイアウトのために）上と下にキャプションを持つCSSテーブルを作ろうとしています。

残念ながら、as far as I can tell,display: table-captionはすべてを上部の単一のスペースにマージします。つまり、実際には「ヘッダー」キャプションのみが表示されます。

I've tried treating them as rows insteadしかし、何らかの理由で、幅が最初の表の列の幅にバインドされます。 （私はここで何か間違っていますか？）普通のものをdivとし、その幅を100%に設定すると同じことが起こります。

もう1つ、おそらくよりエレガントな方法で複数の表キャプションを使用できますか？私はレイアウトをねじっている私の試みでいくつかのばかげたエラーを犯しましたか？

Answer 1

レイアウト用にCSSを使用しているため（これは表形式のデータではありません）、フッターにdisplay:table-captionを使用する理由はありません。幅がテーブルと同じに設定されている通常のdivを作成するだけです（または表をシュリンクラップするコンテナを塗りつぶします）。

編集：ここでは、更新例です：行のようにそれらを扱うhttp://jsfiddle.net/fCTpR/1/