表題をtop以外に置くと正しい位置に表示されない

症状

caption-sideプロパティを使用して表題の位置を指定することができるが、表の上以外に表題を置くと正しい位置に表示されない。

  • Opera6.0:表題を表の左か右に置いたときに表題が表から離れて表示される。場合によっては消える。
  • Opera7.0:表題を表の左か右に置いたときに表題が消える。また、表題を表の下に置いたときに表題が表から離れて表示される。
  • Opera7.1:表題を表の左か右に置こうとしても表題は表の上に表示される。また、表題を表の下に置いたときに表題が表から離れて表示される。

例示

<table border="1">
<caption style="caption-side:top;">上</caption>
<tr><td>↑↑↑↑↑</td></tr>
</table>

<table border="1">
<caption style="caption-side:bottom;">下</caption>
<tr><td>↓↓↓↓↓</td></tr>
</table>

<table border="1">
<caption style="caption-side:left;">左</caption>
<tr><td>←←←←←</td></tr>
</table>

<table border="1">
<caption style="caption-side:right;">右</caption>
<tr><td>→→→→→</td></tr>
</table>
↑↑↑↑↑

↓↓↓↓↓

←←←←←

→→→→→

上下左右に表題を置いています。

スクリーンショット

Moz1.4Moz1.4RC2での表示

Op6Opera6.06での表示

Op7Opera7.11での表示

補足

Opera6で右に置いた表題が表から離れて見えるのは表題要素にwidthプロパティを指定していない(auto値になっている)ことが原因です。表題要素にwidthプロパティでauto以外の値を指定することで見た目の違いを抑えることができます。なお、CSS2勧告 17.4.1によるとMozillaの実装もOpera6の実装も仕様違反ではありません。

Opera6で左に置いた表題が消える現象は表を右寄せする(margin-left:auto; margin-right:0;)ことで回避できます。しかし、Opera7.0で左右に置いた表題が消える現象や下に置いた表題が表から離れてしまう現象は回避できないようです。

修正状況

Opera6.06、Opera7.03、Opera7.11で不具合の発生を確認しました。

スポンサーリンク

関連記事

スポンサーリンク

table要素の上マージンがcaption要素の上に設置される

ホームページ製作・web系アプリ系の製作案件募集中です。

上に戻る