表要素でインラインキャプション要素を取得する

Question

キャプション要素を使用する表を作成しました。テーブルの周りにはボックスシャドウがあり、デフォルトではキャプションはボックスシャドウの外にテーブルの上に置かれます。キャプションをボックスシャドウの内側に収めようとしています。キャプションの表示をdisplay:table-header-groupに変更しましたが、それはテーブル内に配置されますが、私が望むレイアウトは「破損」しています。http://jsfiddle.net/jalbertbowdenii/YraVE/（これはChromeでのみ表示されました）最初の列は多くを占めます他の列よりも幅が広い。誰もが列幅をシフトしないと同時に、表内にキャプションを配置するソリューションを知っていますか？

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

は、私はちょうど同じ問題に遭遇し、この質問になりました。あなたのキャプションが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; 
}