テーブルの中にiframe

質問

テーブルの中にiframeをしているのですが
どうしてもボタンが右側に少しはみ出ますし
iframeは縦400pxを超えるページを表示すると
縦スクロールバーが表示されますが
それも右側にはみ出ます。
どうにか800pxの中に収まらないものでしょうか？

また、ボタンのボーダを下記ソースでは消していますが
デフォルトで表示される立体感のあるボタンのまま
800pxの中に収めたいです。

HTML5、CSS2.1です。
ご相談お願いします。

<table>
<tr style="width: 800px; height: 50px">
<td><input type="button" value="1"/></td>
<td><input type="button" value="2"/></td>
<td><input type="button" value="3"/></td>
<td><input type="button" value="4"/></td>
<td><input type="button" value="5"/></td>
</tr>
<tr style="width: 800px; height: 400px">
<td colspan="5" style="width: 800px; height: 400px">
<iframe src="hoge.htm"></iframe>
</td>
</tr>
<tr style="width: 800px; height: 50px">
<td colspan="5" style="width: 800px; height: 50px">
<p>hoge</p>
</td>
</tr>
</table>
------------------------------------------------------------
table
{
padding: 0px;
margin: 0px;
border-style: none;
border-width: 0px;
}

tr td
{
padding: 0px;
margin: 0px;
border-style: none;
border-width: 0px;
}

input
{
border-style: none;
border-width: 0px;
padding: 0px;
margin: 0px;
color: Red;
width: 160px;
height: 50px;
font-size: 20px;
font-family: HGS明朝B;
background-color: transparent;
}

iframe
{
padding: 0px;
margin: 0px;
border-style: none;
border-width: 0px;
background-color: transparent;
width: 800px;
height: 400px;
}

回答No.1

ORUKA1951 · ベストアンサー

どう見ても表じゃないようですが・・・
またHTMLにもいくつか誤りがあります。trのattr(属性)にはwidthはありません。また、iframeはインライン要素ですから、widthは指定すべきではありません。
[HTML]
　たぶんですが、ボタンによってiframe内のHTMLを入れ替えることを考えてらっしゃるのだと思いますが、その場合でもtableを使うデザインはよくありません。HTML5はHTML4.01以上に文書構造に従ったマークアップが求められます。
　特にtableは、その目的から特殊な挙動をすることが求められていますから、この場合のtableはまずいです。

　スタイルシートのサイズですが、img,object,iframeなどの置換インライン要素は置き換えられた内容サイズを参照しますが、ブロック要素はそれが含まれる親コンテナブロックのサイズを参照します。いったんdisplayプロパティでblockに変更して親コンテナブロックを参照することもよく行われています。
　また、ブロックのサイズは、padding辺の内側のサイズです。(IE6はバグで違う)など、基本的な部分が・・
★8.1 ボックスの寸法（Box dimensions） ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/box.html#box-dimensions )

補足

tableは好ましくないのですか・・・
レイアウトを整えるのにはもってこいと思っていたのですが・・・
どうしたらよいものやら・・・

回答No.2

ORUKA1951

＞レイアウトを整えるのにはもってこいと思っていたのですが・・・
　そのためのものではありません。「ページレイアウトの目的で表を用いる。 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/present/styles.html )」は明確に、相当厳しい言葉で否定されています。

　どのようにHTMLを書くかは内容がわからないとわかりません(HTMLは文書構造を示すものですから)が、
<div id="listHTML">
＿</ol>
＿＿<li><input type="button" value="1"/></li>
＿＿<li><input type="button" value="2"/></li>
＿＿<li><input type="button" value="3"/></li>
＿＿<li><input type="button" value="4"/></li>
＿＿<li><input type="button" value="5"/></li>
＿</ol>
＿<p>
＿＿<iframe>
＿</p>
</div>
でよいです。
★HTMLを書くときにデザインを考えたら失敗します。