内容物を持たないセル要素の枠線が隣接する枠線と重なる

症状

内容物を持たないセル要素にボーダーを表示させる(empty-cells:show;)と、そのセルの枠線が隣接するほかの枠線と重なるように表示されてそのセルだけが他のセルよりも大きく見えてしまう。

例示

<style type="text/css">
table {
  empty-cells: show;
}
td {
  border: 1px solid blue;
}
</style>

<table>
<tr><td>左上のセル</td><td>右上のセル</td></tr>
<tr><td>左下のセル</td><td style="background:aqua;"></td></tr>
</table>
左上のセル右上のセル
左下のセル

すべてのセルのサイズは等しいはずです。

補足

ボーダーは広がってしまいますが、背景が表示される領域の大きさは本来のセルの大きさと同じです。従って、背景が表示される領域とボーダーとの間に隙間ができます。

セル内に何らかの内容物を持たせることでこの不具合を回避することができます。セル要素をempty-cellsプロパティの対象にしたい場合は内容物を&nbsp;、CR(0x0D)、LF(0x0A)、水平タブ(0x09)、1バイト空白(0x20)で構成される文字列にしてください。

修正状況

  • MacIE5.1〜5.2でこの不具合が発生するそうです。

関連記事

スポンサーリンク

Google mapsから緯度経度を調べる方法

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

上に戻る