`table`要素にマージンを指定すると、親要素の背景位置がブラウザによって異なる

投稿: 2010年5月13日

ポイントは2点。

table要素にマージンを設定。
table要素の親要素に背景を設定。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="content-style-type" content="text/css" />
<title>table要素のmarginテスト</title>
<style type="text/css">
body {
  padding: 0;
  margin: 0;
}
div.table {
  color: #000;
  background: #ccc;
  height: 100px;
} /*親要素*/
table {
  margin: 10px;
  border: 1px solid #000;
}
</style>
</head>
<body>
<div class="table">
<table>
<tbody>
<tr><td>td</td></tr>
</tbody>
</table>
</div>
</body>
</html>

このHTMLを各ブラウザで表示させます。Firefox 3.6, IE 7 は最上部から高さ100px分が灰色背景になりました。また、左上隅から下に10px、右に10pxのところにtable要素が表示されます。

一方、Google Chrome 4.1 や IE 8, Opera 10.5、Safari 4 は上部10pxを空けて高さ100px分が灰色背景になります。つまり、背景色の終わる部分は最上部から110px下がった場所となります。table要素が表示される場所は変わらず、左上隅から下に10px、右に10pxのところです。

というように、ブラウザによって違いが生じてしまいます。ちなみに、table要素でなくdivやp要素だと、Firefoxでは後者の表示になります。まとめるとこんな感じ。

ブラウザ	`table`要素	`p`要素
Firefox 3.6	上部空きなし	上部空き10px
Google Chrome 4.1	上部空き10px	上部空き10px
Internet Explorer 7	上部空きなし	上部空きなし
Internet Explorer 8	上部空き10px	上部空き10px
Opera 10.5	上部空き10px	上部空き10px
Safari 4	上部空き10px	上部空き10px

すべてWindows版での確認です。

で、table要素に境界特性を指定してやれば、ブラウザによる違いはなくなります。すなわち、親要素とtable要素のスタイルを次のように変更します。

div.table {
  color: #000;
  background: #ccc;
  border-top: 1px solid #ccc;
  height: 99px;
} /*親要素*/
table {
  margin: 9px 10px 10px;
  border: 1px solid #000;
}

親要素の上境界に背景色と同じ色で適当な長さを指定して、その長さ分、親要素の高さとtable要素の上マージンから差し引きます。

これで Google Chrome, Safari, Opera でも上部の余白はなくなり、Firefox や IE 7 と同様の表示になります。

もっとちゃんとした対処法があるかもしれませんが、「なんとなく border-top を指定してみたら統一できちゃったよ」というメモでした。