キャプション要素を利用する表を作成しました。テーブルの周りにボックス シャドウがあり、デフォルトでは、キャプションはボックス シャドウの外側のテーブルの上に配置されます。キャプションをボックスの影の中に入れようとしています。キャプションの表示を に変更しました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>