みんなの「教えて(疑問・質問)」にみんなで「答える」Q&Aコミュニティ

こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

解決済みの質問

css で指定した div と table の幅が

html と css の勉強中です。
スタイルシートで次のように同じ幅を
指定したのですが、表とブロックの幅が
揃いません。

<style><!--
#a {width:300px;border:solid 2px}
#b {width:300px;border:solid 2px}
--></style>

<div id="a">
<p> a b c d </p>
</div>
<table id="b" border="1">
<tr>
<td>a</td><td>b</td><td>c</td><td>d</td>
</tr>
</table>

ブラウザは IE6と opera で見てみました。
お願いします。

投稿日時 - 2005-12-30 23:30:45

QNo.1868061

暇なときに回答ください

質問者が選んだベストアンサー

widthの指定は要素の内容を指定するものなので、
300px+左右のborderの幅(2px×2)、で計304pxの幅の箱が描画されます。
※ここでは指定されていませんがpaddingが0でなければpaddingの値も加味される)
※古いIEとIE6の互換モードではborderの幅も含めてしまうバグがある。

ただし、tableの場合はtable全体及び各セルのborderの幅、border間の空白(border-spacing)、各セルのpadding等の各種要素を含めた全体が300pxになるよう調整されます。

tableと他の要素の幅を合わせたい場合はborderの幅とpaddingの幅にも注意を払う必要があります。

以下のURLもご覧になってみてください。
http://members.at.infoseek.co.jp/cssbug/detail/winie/b001.html
http://www.y-adagio.com/public/standards/tr_css2/tables.html

投稿日時 - 2005-12-31 08:02:38

お礼

4pxをひいた幅を指定すればうまくいきました。 見栄えはスタイルシートでということで勉強中なのですが、なかなか難しいですね。 ありがとうございました。

投稿日時 - 2005-12-31 11:01:14

このQ&Aは役に立ちましたか?

0人が「このQ&Aが役に立った」と投票しています

回答(1)

あなたにオススメの質問