- ベストアンサー
table内でiframeを表示
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
修正 window.onloadのがよさそうでした ■head内に <script type="text/javascript"> window.onload=function(){ var ihei=document.getElementById("ibox").scrollHeight; var itarget =document.getElementById("fitifra"); itarget.style.height=ihei+"px"; } </script> ■iframeの入っているtdとiframeにidを振る <td id="ibox"><iframe src="inline_dummy.html" frameborder="0" id="fitifra"></iframe></td>
その他の回答 (2)
- salonpath
- ベストアンサー率48% (194/399)
iframeの中身のサイズに合わせてtdを拡張するのではなく tdのサイズにiframeを合わせるんですよね？ htmlとcssだけだと出来なかったので、よく判らないながらjavascriptを書いてみました、ミスってたらすみません。 よければどなたか添削お願いします。 ■head内に <script type="text/javascript"> function fitframe(){ var ihei=document.getElementById("ibox").scrollHeight; var itarget =document.getElementById("fitifra"); itarget.style.height=ihei+"px"; } </script> ■bodyにonloadを追加 <body onload="fitframe();"> ■iframeの入っているtdとiframeにidを振る <td id="ibox"><iframe src="inline_dummy.html" frameborder="0" id="fitifra"></iframe></td>
- salonpath
- ベストアンサー率48% (194/399)
<iframe src="・・・" width="100%" frameborder="0"></iframe>
お礼
ありがとうございました！ 幅の問題解決しました！しかし…同じ様にheight="100%"で指定したのですが、縦の幅が合いません…少し隙間が開いてしまうんです…右クリック→Rで更新するとピッタリあうのですが…。常にピッタリと縦幅をそろえるにはどうすればいいでしょうか…？frameborder="0"を指定してもしなくても同じ結果になります。
関連するQ&A
- テーブルの入れ子について
このようにテーブルを入れ子にするのは不可能なのでしょうか？ <table> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> </tr> <tr> <td colspan="4"> <table> <tr> <td>5</td> <td>6</td> <td>7</td> <td>8</td> </tr> </table> </td> </tr> </table> ｃｓｓなどでいろいろと設定しても、 「5・6・7・8」のセルが「１」のセルの幅にしかなりません。 colspanしているセル全体にテーブルを置きたいのですが・・・。 間違いを教えて下さい。 よろしくお願いします。
- ベストアンサー
- HTML
- htmlのtable内に画像
初心者です。 tableの中に画像をぴったり貼り付けたいです。 しかし、セルの横に並んだセル内の一方に画像を入れると、 片方に幅が取られぴったり行きません。 ご存知の方がおられましたら教えてください。 よろしくお願い致します。 試した事 <table width="100%"border="1"> <tr> <td> <img src="test.jpg"> </td> <td> test </td> </tr> <tr> <td> test </td> </tr> <tr> <td colspan="2"> test </td> </tr> </table>
- ベストアンサー
- HTML
- DHTMLでテーブルの行の表示・非表示を切り替える。
こんにちは。 WEBアプリケーションのモックアップを作成しています。 自身はJava屋ですが、DHTMLに明るくないため、苦戦しています。 同一画面内のリンクがクリックされた場合に・・・ テーブルの行の表示、非表示を切り替えたいのです。 <!-- ========================= --> <!-- テーブル１ --> <table border="1"> <tr> <td>ヘッダ１</td> <td>ヘッダ２</td> </tr> <!-- ☆☆☆ ここから ☆☆☆ --> <tr> <td>111</td> <td>aaa</td> </tr> <tr> <td>222</td> <td>bbb</td> </tr> <!-- ☆☆☆ ここまで消したい ☆☆☆ --> </table> <!-- テーブル２ --> <table border="1"> <tr> <td>ヘッダA</td> <td>ヘッダB</td> </tr> <tr> <td>あああ</td> <td>いいい</td> </tr> </table> <!-- ========================= --> <tr>タグを<div>タグで囲んで、styleでhidden、visibleを切り替えようと考えましたが、<tr>に<div>タグが使えない事を知りました。 そこで、テーブル１を大きくテーブルで囲み、ヘッダとボディ部をセルに入れて、セルの表示・非表示を切り替えました。 これは上手くいったのですが、非表示にした場合、テーブル２との間は詰まるようにしたいのですが、もともと表示されていた分のスペースが出来てしまいました。 あまり、ロジックを組み込まずに作ろうと考えているのですが、上手い方法が思いつきません。 何か良い方法がありましたら、ご教授願います。 ターゲットのブラウザは… IE5.5～IE7 です。
- ベストアンサー
- HTML
- テーブルの中に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; }
- ベストアンサー
- HTML
- Iframeとして呼び出すページを120ｐｘ以下を表示したい
Iframeを使いたいのですが、A.htmlの高さ120pixから下をIframeで指定したいときはどうしたらいいでしょうか。 <html> <head> <title>testtitle> </head> <body> <div width:100%; height:120px;> <table> <tr> <td><iframe src="A.htm" width="100%" height="100%" frameborder="0" scrolling="no" overflow:no></iframe><td> </tr> </table> </div> </body> </html> 呼び出すIframeの中身のページについて 高さを120pix以下を表示したいのですが。 よろしくおねがします。
- 締切済み
- JavaScript
- テーブルレイアウト
テーブルレイアウトで困っています。 <table width="100%" height="100%" border="1"> <tr> <td colspan="2" valign="top" height="100">全体の幅は100％</td> </tr> <tr> <td width="150" valign="top">左のセル<br>幅150</td> <td valign="top">右のセル<br>幅指定なし</td> </tr> </table> これだと問題なく表示されるのですが、 <table width="100%" height="100%" border="1"> <tr> <td colspan="2" valign="top" height="100">全体の幅は100％ 少し長い文章を入れる</td> </tr> <tr> <td width="150" valign="top">左のセル<br>幅150</td> <td valign="top">右のセル<br>幅指定なし</td> </tr> </table> このように１列目のセルに長い文章を入れると、２列目の左のセルの幅が勝手に広がってしまいます。 何が原因で、対処法はないでしょうか？ Netscape7.1ではこうならないんですが、IE6では勝手に崩れてしまいます。 よろしくお願いします。
- ベストアンサー
- HTML
- 一つのテーブル内の情報を、iframeではなく、非同期通信で行うには？
一つのテーブル内の情報を、iframeではなく、非同期通信で行うには？ 現在、トップページ内の一つのコンテンツを、 iframeで一定時間毎に自動リロードさせる形で演出しているのですが、 SEO的に良くないと聞き、それと同時に解決策として 「非同期通信」の存在を知りました。Ajaxを利用すれば、iframeを使わずに 今のような演出が可能らしいのですが、どのような形で記述すれば宜しいでしょうか？ 例を書きます。 トップページ … index.php コンテンツの入ったページ … contents.php（テーブルレイアウトで作成） 現状は、index.phpに置かれたiframeの場所に、contents.phpを読み込んでいます。 iframeは5分毎に自動更新させていますが、これを非同期通信で5分毎に呼び出したいです。 付け焼刃の知識でイメージしている仕組みは、 まず、prototype.jsなどのライブラリをindex.php内で読み込ませ、 指定したtableやdivにcontents.phpを呼び出す仕組みなのかなと勝手に想像しています。 参考になる記述方法をどなたかご教授頂けませんでしょうか… 現状はこのような記述方法で対応しています。 index.php内 －－－－－－－－－－－－－－－－－－－－－－－ <body> <table width="300" height="300"> <tr> <td width="300" height="300"> <iframe src="contents.php" width="300" height="300"></iframe> </td> </tr> </table> </body> －－－－－－－－－－－－－－－－－－－－－－－ contents.php －－－－－－－－－－－－－－－－－－－－－－－ <body> <table width="300" height="300"> <tr> <td width="300" height="300"> ここはコンテンツページです </td> </tr> </table> </body> －－－－－－－－－－－－－－－－－－－－－－－
- 締切済み
- AJAX
- Netscape6.02におけるiframeの%表示について
インラインフレームを使って、下の例のように％指定で表示させたいのですが、 Netscape7では問題なく表示されるのですが、Netscape6.02では表示されません。 （表示されないというか、0%と解釈されるようです。） サイズを％ではなくピクセルで指定すれば問題ないのですが、画面サイズにかかわらずフルサイズで表示されるようにしたいため、パーセンテージで指定したいのです。 何かいい方法をご存じの方がいたら、教えて下さい。 無理な場合は、Netscapeのバージョン7未満では別のページにジャンプさせるという方法でもかまいません。 よろしくお願いします。 （例） <html> <head></head> <body> <table width="100%" height="100%"> <tr> <td width="100%" height="100%"> <iframe src="http://www.okweb.ne.jp/" width="100%" height="100%"></iframe> </td> </tr> </table> </body> </html>
- ベストアンサー
- HTML
- 二つのテーブルを横に並べて表示するにはどうすれば
"<table border=10><tr><td>test</td></tr></table><table border=10><tr><td>test</td></tr></table>" のように、テーブルを二つ表示させたい時に test test と、縦に並んでブラウザに表示されてしまうのですが testtest のように、二つのテーブルを横に並べて表示するにはどうすればよいでしょうか？
- ベストアンサー
- HTML
- テーブルに画像を入れると、テーブルの幅が広がってしまいます
HTML初心者の者です。 ３行２列のテーブルを作り、左側の列に縮小した画像を入れたのですが、左側の列が画面いっぱいに広がってしまい、画像の幅に合わせて幅を狭くすることが出来ないでいます。 どうしたら、画像の幅に合わせて左列の幅を狭くすることが出来るでしょうか。 その部分のHTMLは、以下の通りです。 <table border="0" align="center"> <tr> <td><img src="*****.jpg" width=20% align="right"> </td> <td>説明文・・・・</td> </tr> <tr> </td><img src="*****.jpg" width=20% align="right"> </td> <td>説明文・・・・</td> </tr> <tr> </td><img src="*****.jpg" width=20% align="right"> </td> <td>説明文・・・・</td> </tr> </table>
- ベストアンサー
- HTML
お礼
回答ありがとうございます！ やはりhtml+cssでは、難しいでしょうか…？できればjavascriptを使わないで実現したいと考えているのですが…。ですがせっかく教えていただいたので、今はjavascriptで対応したいと思います！ どうもありがとうございました！