여러 테이블 자막을 시뮬레이트하려면 어떻게해야합니까?

Question

레이아웃 목적으로 상단과 하단에 캡션이있는 CSS 테이블을 만들려고합니다.

불행히도 as far as I can tell, display: table-caption은 모든 것을 맨 위의 단일 공간에 병합합니다. 즉, "머리글"캡션 만 실제로 표시됩니다.

I've tried treating them as rows instead 그러나 어떤 이유로 인해 너비가 첫 번째 테이블 열의 너비에 바인딩됩니다. (내가 여기서 뭔가 잘못하고있는 걸까요?) div을 너비가 100%으로 정규화하면 똑같은 일이 일어납니다.

여러 가지 표 캡션을 사용하는 또 다른 방법이 있을까요? 레이아웃을 망치는 시도에서 어리석은 실수를 저질렀습니까?

Answer 1

CSS 레이아웃을 사용하고 있기 때문에 (표 형식의 데이터가 아님) 바닥 글에 display:table-caption을 사용할 이유가 없습니다. 너비가 테이블과 동일하게 설정된 정규 div를 만들거나 테이블을 축소시키는 컨테이너를 채 웁니다.

편집 : 여기에 업데이트 된 예제 : 행처럼 그들을 치료 http://jsfiddle.net/fCTpR/1/