캡션 요소를 테이블 요소로 인라인으로 가져 오기

Question

캡션 요소를 사용하는 테이블을 만들었습니다. 테이블 주변에는 상자 그림자가 있고 기본적으로 캡션은 상자 그림자 외부의 테이블 꼭대기에 배치됩니다. 캡션을 상자 그림자 안에 넣으려고합니다. 캡션의 디스플레이를 display:table-header-group으로 변경했는데, 테이블 안에 배치했지만 원하는 레이아웃을 "부러 뜨 렸습니다".... 여기에서 볼 수 있습니다 : http://jsfiddle.net/jalbertbowdenii/YraVE/ (크롬에서만 보았습니다) 첫 번째 열은 많이 걸립니다 다른 열보다 너비가 더 큽니다. 누구도 동시에 열 너비를 이동하지 않는 동안 테이블 내에 캡션을 배치 할 솔루션을 알고 있습니까?

CSS :

table{border-collapse:collapse; border-spacing:0; padding-top:0.5em; padding-bottom:0.5em; margin:0.8em auto; -moz-box-shadow:0 0 4px #000; -ms-box-shadow:0 0 4px #000; -o-box-shadow:0 0 4px #000; -webkit-box-shadow:0 0 4px #000; box-shadow:0 0 4px #000; color:#000; width:80%} 
.captionx{display:table-header-group} 

HTML :

<h1>Caption Default <code>display:table-caption</code></h1>  
<table summary="Summary of Table Data"> 
     <caption>Caption for Table</caption> 
     <thead><tr><th>Sun</th><th>Mon</th><th>Tues</th><th>Wed</th><th>Thu</th><th>Fri</th><th>Sat</th></tr></thead> 
     <tfoot><tr><td colspan="7"><p>Table Footer</p></td></tr></tfoot>  
     <tbody> 
      <tr><td>01</td><td>02</td><td>03</td><td>04</td><td>05</td><td>06</td><td>07</td></tr>   
     </tbody> 
     </table> 
<hr /> 
<h1>Caption set to <code>display:</code></h1> 
     <table summary="Summary of Table Data"> 
     <caption class="captionx">Caption for Table</caption> 
     <thead><tr><th>Sun</th><th>Mon</th><th>Tues</th><th>Wed</th><th>Thu</th><th>Fri</th><th>Sat</th></tr></thead> 
     <tfoot><tr><td colspan="7"><p>Table Footer</p></td></tr></tfoot>  
     <tbody> 
      <tr><td>01</td><td>02</td><td>03</td><td>04</td><td>05</td><td>06</td><td>07</td></tr>   
     </tbody> 
     </table> 

Answer 1

난 그냥 같은 문제로 실행하고이 질문에 도착. 자막이 한 줄 (즉, 높이를 알고 있음) 인 것으로 확신하는 경우 및 table에서 position:relative으로 설정하여 padding-top과 caption의 높이를 같게 설정할 수 있습니다.

table { 
    position: relative; 
    padding-top: 20px; 
} 

caption { 
    position: absolute; 
    top: 0; 
    left: 0; 
    height: 20px; 
    line-height: 20px; 
}