- 締切済み
テーブルスクロール firefox opera等
私のサイトでは、テーブルにスクロールバーを表示している部分があるんですが、 firefoxやoperaなどのブラウザではスクロールバーが非表示になり、テーブル内が縦長に表示されてしまうようです。 firefox、opera、その他のブラウザで表示できるテーブル内のスクロールバーのタグ、教えてくださいっ。 すべてのブラウザに適応したタグがなければ、firefoxで表示したときのタグ、operaで表示したときのタグなどを、分け、 そのブラウザによって、表示するタグを変えるというのは、できませんでしょうか？ 教えてください。 ↓現在使用しているタグです <span style="width:100%;height:72;overflow:auto;border:3px solid #eeeeee;">
- yamamcks
- お礼率25% (5/20)
- JavaScript
- 回答数3
- ありがとう数1
- みんなの回答 （3）
- 専門家の回答
みんなの回答
- leap_day
- ベストアンサー率60% (338/561)
こんにちは もしかしてこことか参考にしました？ http://capsule.chips.jp/ts_11.html 確かにIEではスクロールされてますがこれは多分<!DOCTYPE～の宣言をしてないからじゃないですかね？ 一般的には『DIVスクロール』の呼び方の方がよく使われてるんじゃないですかね？ 基本的なミスはもう指摘されてるので補足と(回答したついでに）ついで回答だけ・・ <span>でやるならCSSにdisplay:block;をいれてブロック要素に強制的にしてください そうでなければ<span>などのインライン要素ではなく<p>や<div>などのブロック要素で行ってください ―――ついで回答――― iframeクッキーの方ですが自分のほうではtest2.html(a.html)は表示されてるみたいです 見直してみて記述ミスや書き換えミスなどがないか見てみてくださいｍ（－－）ｍ
- SAYKA
- ベストアンサー率34% (944/2776)
No1の言うように単位が付いてないっていうのもあるけどspanだとwidthやheightの要素は機能しないんじゃない？
- grumpy_the_dwarf
- ベストアンサー率48% (1628/3337)
高さの数値に単位が無いので無視してます。無視されたくなければ 単位までちゃんと書きましょう。
関連するQ&A
- CSSだけで、テーブルにスクロールバーを表示させたいのですが…
CSSを使い、テーブルにスクロールバーを表示させたいのですが <div style="height:60px; width:300px; overflow-y:scroll;"> <table border=1 width=300> : </table> </div> 上記の方法だと確かにスクロールバーは表示されるのですが、出来ればDIVを使わずに、作っておいたCSSを適用するだけで、テーブルにスクロールバーを表示させることは可能でしょうか？ 出来れば、スクロールバーの色を変更して、横(X軸)のスクロールバーも消したいのですが… CSSで .scroll { overflow: scroll; visibility: visible; height: 100px; width: 140px; } とやってみたのですが、どうしてもスクロールバーが表示されません。何が足りないのか、もしくは根本から間違っているのかがわかりません。 ご存知の方教えて下さい。
- ベストアンサー
- HTML
- テーブル内のスクロール
初めて質問いたします。 HTML構文をきちんと理解しないまま、サイトをつくってしまっていますが、ひとつ困っていることがあります。テーブルの中のひとつのセルの高さサイズを固定してその中につくったテーブルを縦にスクロールさせています。winではうまく表示できるのですが、mac環境の人からスクロールしないと言われました。ブラウザはIE5と聞いています。以下のような構文にしていますが、なにか間違えているのでしょうか？どなたか教えていただけると助かります。よろしくお願いいたします。 <table width="620" border="0" cellspacing="0" cellpadding="0" bgcolor="#FFFFFF"height="500"> <tr> <td height="60" valign="top"> </td> </tr> <tr> <td> <div align="center"> <div style="height:400px;width:600px;overflow-y:scroll;"> <table width="600" border="0" cellspacing="0" cellpadding="0"> </table> </div> </div> </td> </tr> </table>
- ベストアンサー
- HTML
- テーブルを作ったんですが…
はじめまして 画像テーブルを作ったのですが、スクロールバーがでません。 タグを載せておきますので暇でしたら解答してください。 <style TYPE="text/css"> <!--.auto {border:solid;height:450pt;width:500pt;overflow:auto;}--> </style> <TABLE align="left" width="500" cellpadding="0" cellspacing="0" border="0"> <TBODY> <TR> <TD width="420" height="27"><IMG src="01.gif" width="42" height="27" border="0"></TD> <TD background="02.gif"></TD> <TD width="0" height="0"><IMG src="03.gif" width="40" height="27" border="0"></TD> </TR> <TR align="left"> <TD background="04.gif"></TD> <TD width="100%" height="350" bgcolor="white"><pre>テスト<BR> </TD> <TD background="06.gif"></TD> </TR> <TR> <TD width="416" height="25"><IMG src="07.gif" width="42" height="46" border="0"></TD> <TD background="08.gif"></TD> <TD width="0" height="0"><IMG src="09.gif" width="40" height="46" border="0"></TD> </TR> </TBODY> </TABLE>
- ベストアンサー
- その他（インターネット・Webサービス）
- Firefoxスクロールバーの有無でページがずれる
Firefoxスクロールバーの有無でページがずれる 縦の長さが長いページから短いページに切り替えるとき、スクロールバーの関係で左右にガタガタずれて見えるためcssで html{ height:100%; margin-bottom:1px;} と入れてみました。（ネットで探したものです） そうするとOperaとgoogleとSafariではずれなくなったのですが、Firefoxだけ相変わらずずれます。 overflow-y:scrollにするとずれませんでしたが、IEで見たときスクロールバーが二重に見えたので、この方法は避けたいです。 Firefoxでもガタガタずれずに切り替えられる方法はありませんでしょうか？ よろしくお願いします。
- 締切済み
- HTML
- CSSでスクロールバー
CSSでdivタグにwidthとheightを指定してボックスを作ります。そして、そこにoverflow:scroll;を指定して、そのボックスにスクロールバーを表示させるのですが、下のスクロールバーを表示させないようにするにはどうすればいいんでしょうか？右横の縦方向のスクロールバーは必要ですが、表示させるもののwidthが決まっている場合、下の横方向のスクロールバーが邪魔で仕方ないんですけど。 どなたか教えて下さいませんか？？
- ベストアンサー
- HTML
- firefoxでスクロールバーが二重に出てしまいます。
初めて自分でXHTML+CSSでサイトを作ろうとしている者です。 bodyの直下に「div id="container"」を置き、containerをCSSで #container { margin:0 auto; overflow: auto; background-color:#fff; width :90% ; height:100%; } としています。 この時、containerの右側と下側に、スクロールバーが出現してしまいます。 通常のブラウザのスクロールバーに加えて内側にスクロールバーが二重になってしまっている状態です。 質問ですが、どうすればこの内側のスクロールバーを消せるのでしょうか？ ちなみにOSはXP、ブラウザはfirefoxです。（IE6で見た時は内側のスクロールバーは出ません） このままだと相当格好悪いので、何とか直したいと思っています。 どなたかご教示頂ければ幸いです。 よろしくお願い致します。
- ベストアンサー
- HTML
- tableで横スクロールバーが・・
tableの高さがブラウザの表示範囲を超えると 少しだけ右の方に空白ができ、 横スクロールバーが出てきて醜い状態になってしまいます。 タグは、大まかにこのような感じで、 外部スタイルシートを適用させていて、 tableには枠線をつけています。 <body scroll="auto"> <table style="width:720px;" class="枠線、パディング、マージン等"> <tr> <td colspan="2" style="background-image:url("***.jpg(720x150pxの画像)"); width:720px;height:150px;"> <a href="リンク">リンク</a> </td> </tr> <td colspan="1" width="100%"> <!メニュー部分> </td> <td colspan="1"> <!本文部分> </td> </tr> <tr> <td> <!著作権表示> </td> </tr> </table> </body> 本文が少なければ、tableの高さがブラウザの表示範囲の中に収まるので 横スクロールバーは出ませんが、 収まらないときには横スクロールバーが出てしまいます。 横スクロールバーを出さないようにするにはどうすればよいのでしょうか？ 分かりにくい箇所があればご指摘をお願いします。 回答をお待ちします。
- ベストアンサー
- CSS
- liタグのナビボタンがFirefoxで二重に表示。
liタグでナビボタンを縦に３つ積みたいのですが、IEでは正しく表示しますが、何故かFirefoxでは２段めから２つずつ表示してしまい５つのナビボタンになってしまいます。どのように記述すれば良いのでしょう？ <div id="sidebar"> <ul> <li id="aaa"><a href=""><span>aaa</span></li> <li id="bbb"><a href=""><span>bbb</span></li> <li id="ccc"><a href=""><span>ccc</span></li> </ul> </div> div#sidebar { width: 245px; float:left; border-right-width: 1px; border-right-style: solid; border-right-color: #CCCCCC; } div#sidebar ul li a { display: block; } div#sidebar ul li a span { position:absolute; width: 0; height: 0; overflow:hidden; } ul li#aaa a { width: 245px; height: 60px; background-image:url(image/aa.jpg); background-position: 10px 20px; background-repeat: no-repeat; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #999999; } ul li#bbb a { width: 245px; height: 60px; background-image:url(image/bb.jpg); background-position: 10px 20px; background-repeat: no-repeat; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #999999; } ul li#ccc a { width: 245px; height: 60px; background-image:url(image/cc.jpg); background-position: 10px 20px; background-repeat: no-repeat; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #999999; }
- ベストアンサー
- CSS
- firefoxのみテーブルのborderが消える
firefoxのみテーブルの上下のborderの一部が消えてしまいます。 ウィンドウのサイズを変えると消える位置が変わります。 消えないための方法はありますか？ 【CSS】 table.aaa{ width:750px; border-top:1px solid #333; border-bottom:1px solid #333; border-collapse:separate; border-spacing:0; text-align:center; margin-top:30px; } td.bbb, td.ccc{ padding:30px 30px; } td.ccc{ width:100px; background:#000; color:#fff; } ul{ width:750px; margin-left: -23px; overflow:hidden; } ul li { display: inline; width: 200px; margin-left: 30px; float: left; } ul li img { display: block; border: 1px solid #555; } 【HTML】 <table class="aaa"> <tr> <td class="ccc">テスト１</td> <td class="bbb">※※※※※※※※※※</td> </tr> </table> <ul> <li><a href="xxx.html#w1"><img src="sample.jpg" width="200" height="150" ></li> <li><a href="xxx.html#w2"><img src="sample.jpg" width="200" height="150" ></li> <li><a href="xxx.html#w3"><img src="sample.jpg" width="200" height="150" ></li> </ul> <ul> <li><a href="xxx.html#w4"><img src="sample.jpg" width="200" height="150" ></li> </ul> <table～…～</ul>まで10個ほど繰り返す。
- ベストアンサー
- HTML
- テーブル内widthでの改行処理がIEとFirefoxで異なる
テーブル内のtdに対してwidthを指定していますが、IEとFirefoxで表示が異なります。具体的には下記のコードにて、【文章１】が長い場合、IEではwidth:160pxで自動改行するのですが、Firefoxでは改行されず横に表示されてしまいます。 いちいち改行文字を入れるのはめんどうなのでFirefoxでも自動改行されるようにしたいのですが、何かうまい手をご存知の方、ご教示願います。 ＜スタイルシート＞ #contact_table table { width:600px; padding:auto; margin:auto; text-align:center; border-collapse:separate; } #contact_table tr { padding:auto; margin:auto; text-align:center; } #contact_table td { padding:5px; margin:5px; border-top:solid 2px #EEEEEE; border-left:solid 2px #EEEEEE; border-right:solid 2px #C0C0C0; border-bottom:solid 2px #C0C0C0; font-size:12px; font-weight:normal; color:#000000; text-align:left; line-height:1.5em; background:#DAEAF3; } #contact_table td.item { width:160px; white-space:nowrap; background: #000080; text-align:center; border-top:solid 2px #0000CC; border-left:solid 2px #0000CC; border-right:solid 2px #000033; border-bottom:solid 2px #000033; color:#FFFFFF; } ＜HTML＞ <div id="contact_table"> <table summary="お問い合わせ"> <tr> <td class="item">【文章１】</td> <td>【文章２】</td> </tr> <tr> <td class="item">【文章１】</td> <td>【文章２】</td> </tr> ・・・ </table> </div>
- ベストアンサー
- HTML
補足
えーと、回答ありがとうございます。 単位をpxにしたのですが、うまく表示されないようです。