- ベストアンサー
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; } とやってみたのですが、どうしてもスクロールバーが表示されません。何が足りないのか、もしくは根本から間違っているのかがわかりません。 ご存知の方教えて下さい。
- zexus
- お礼率96% (141/146)
- HTML
- 回答数4
- ありがとう数6
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
> 出来ればDIVを使わずに、作っておいたCSSを適用するだけで、テーブルにスクロールバーを表示させることは可能でしょうか？ 何だか仰っている事がいまいち分かりづらいのですが、以下の2種類を推測しました。 【A】 「<table>を<div>で入れ子にするマークアップではなく、<table>自体に定義したスタイルでスクロールバーを出したい」という意味であれば、できません。はみ出した部分の処理をする（スクロールバーの表示・非表示を制御）overflowプロパティは適用対象がブロック要素の為、table要素である<table>には適用されないからです。 【B】 「<div style="height:60px; width:300px; overflow-y:scroll;">の様にHTMLのマークアップに直接style属性で定義するのではなく、外部ファイル（もしくは<head>内で<style type="text/css">～</style>）でまとめて定義したスタイルを適用させたい」ということであれば、できます。 以下は【B】の場合のサンプルです。 XML宣言有りのXHTML 1.1で検証。IE6.0/7.0、Firefox2.0～、Opera9.25 on Windows XPで同様の結果を得ています。 ---------------------------------------------------------------------- 【HTML】 ---------------------------------------------------------------------- <div class="hoge"> <table cellspacing="0" cellpadding="0" border="0" summary="サンプル"> <tr> <th>見出し1</th> <td>データデータデータデータ</td> </tr> <tr> <th>見出し2</th> <td>データデータデータデータ</td> </tr> <tr> <th>見出し3</th> <td>データデータデータデータ</td> </tr> </table> </div> ---------------------------------------------------------------------- 【CSS】 ---------------------------------------------------------------------- div.hoge { width: 140px; height: 100px; overflow: auto; } div.hoge table { border-collapse: collapse; } th, td { font-size: 12px; border: solid 1px #000000; padding: 5px; } ---------------------------------------------------------------------- ・"overflow: scroll"とすると、必ずXY両軸のスクロールバーが表示されます。"overflow: auto"にしておけば、子要素（この場合は<table>）の幅が親要素の幅を超えていない限り、X軸のスクロールバーは表示されません。Y軸のスクロールバーは子要素の高さが親要素の高さを超えた時点から発生します。高さに満たない場合は自動的に表示となります。 ・"overflow-y""overflow-x:"はIEの独自拡張の為、他の環境では効きません。 ・"visibility"の値はディフォルが"visible"なので、この場合は特に定義する必要はありません。 > スクロールバーの色を変更して "scrollbar-foo-color"（fooの部分：base、face、track、arrow、highlight、shadow、3dlight、darkshadow）"というプロパティがありますが、同じくIEの独自拡張の為、他の環境では効きません。 実現したいイメージが異なる様であれば補足して下さい。
その他の回答 (3)
- abril
- ベストアンサー率69% (388/560)
すみません、タイポがありましたので訂正しておきます。 【誤】 > 高さに満たない場合は自動的に表示となります。 ↓ 【正】 > 高さに満たない場合は自動的に非表示となります。
- goldfox
- ベストアンサー率49% (123/249)
divをなくして「どこに」スクロールバー（overflow）を付けるのですか？ ＞横(X軸)のスクロールバーも消したいのですが divの横幅が300px。tableの横幅が300px、スクロールバーの幅が20pxとして、divの中身が300＋20ですから横スクロールバーが出ます。 divの横幅を増やせば解決できるかと。
お礼
質問がわかりづらくて申し訳ありません。 自分でも良くわからなかったもので、質問が変になってしまいました。 横のスクロールバーは、横幅を増やせば良いのですね。 参考になりました。 回答ありがとうございます。
- line301
- ベストアンサー率0% (0/22)
/* div02 */ div.div02{ height:100px; overflow:auto; border:1px solid #cccccc; padding:0.5em; margin:1em auto; } <div class="div02"> <p>吾輩（わがはい）は猫である。名前はまだ無い。 どこで生れたかとんと見当（けんとう）がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。</p> </div>
お礼
早速のご回答ありがとうございます。 やってみたのですが、出来ませんでした。 何分初心者なもので…すみません。 でも参考になりました。 もう少し出来るかどうかやってみます。
関連するQ&A
- テーブル内のスクロール
初めて質問いたします。 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
- CSSでスクロールバー
CSSでdivタグにwidthとheightを指定してボックスを作ります。そして、そこにoverflow:scroll;を指定して、そのボックスにスクロールバーを表示させるのですが、下のスクロールバーを表示させないようにするにはどうすればいいんでしょうか？右横の縦方向のスクロールバーは必要ですが、表示させるもののwidthが決まっている場合、下の横方向のスクロールバーが邪魔で仕方ないんですけど。 どなたか教えて下さいませんか？？
- ベストアンサー
- HTML
- スクロールバーのデザインを変えたい
CSSの設定で div#information { height: 150px; overflow: scroll; } という風に記述した時に現れるスクロールバーのデザインを変えたいのですが、IE以外でも対応している方法はないでしょうか？ スクロールバーのデザインを変えるいい方法がありましたら教えて下さい。
- ベストアンサー
- HTML
- ▲▲HTML・CSS TABLEから文字がはみ出す場合スクロールバーをつける？またCSSのBOXについて▲▲
例えば <table border="1" width="650" height="700"> <tr> <td></td> <tr> </table> 高さを700に設定しているので、中に文字を入力し700を超えるようであれば自動的に大きさが広がると思います。 その際TABLEの右側にスクロールをつけて、700をキープする事は可能でしょうか？ またCSSでスクロールバーつきのBOXを作ったときに横のスクロールバーだけを表示するように設定は可能でしょうか？？
- ベストアンサー
- HTML
- スクロールバーの表示位置を変えたい
スクロールバーの表示位置をテーブルの右側から、テーブルの左側に移したいのですが、単にｄｉｖ文をＴａｂｌｅの前に持ってきても変更できません。 どのようにしたら左側に表示できるのでしょうか？ <div id="rowScroll" STYLE="overflow-y:scroll; height=280;width:100%"> <table border="1" CELLSPACING="0" class="tableSearch2" width="20%" align="left"> <tr class="tdListTitle"> <td width="24" align="center" nowrap>レ</td> <td width="21" align="center">No</td> <td width="195" align="center" nowrap>L5.資源名称</td> <td width="60" align="center" nowrap>単位</td> <td width="100" align="center" nowrap>投入数量/単価</td> </tr> </table>
- ベストアンサー
- JavaScript
- DIV の中にTableを配置すると、下の表示されてしまいます
どなたか教えてください！ <tr> <td> <div style="height:400px; width:470px; overflow-y:scroll;" align="left" valign="top"> <table>・・・ スクロールバーの中にテーブルで写真を並べて作成しています。 私のブラウザの環境ですと、うまく表示されますが、 友人のパソコンで見ると、Ｄｉｖの部分から下が、画面の下のほうへずれて表示されてしまいます。 そもそもＤＩＶの中にＴＡＢＬＥは配置してはいけないのですか？ 環境によって・・・何か原因があるのですか？（ＩＥのバージョンは一緒でした。） 宜しくお願いいたします。
- 締切済み
- HTML
- CSSで擬似的にフレームを作りたい
CSSのoverflow:scrollを利用した、 フレームのように一部分をスクロールできるページを考えております。 画面左側をメニューにするには <body> <div class="menu"></div> <div class="content"></div> </body> のようなHTMLに *{margin:0px;padding:0px;} html{height:100%;} body{height:100%;} .menu{height:100%;float:left;width:100px;overflow:scroll;} .content{height:100%;margin:0 0 0 100px;overflow:scroll;} のようなスタイルシートという形で可能ですが、 上側をメニューにするにはどのようにすれば良いでしょうか？
- ベストアンサー
- 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
- 高さを指定せずに子divにスクロールバー
お世話になっております。 内包されたdivにスクロールバーをつけたいのですが、高さを指定したくない場合はどうすれば良いでしょうか？ 何がしたいのかと言えば 高さを規定した親div内に、問題の子divを入れます。 この子divにoverfllow:auto;を効かせて、中のテキストがはみ出した場合にスクロールバーを表示させたいです。 問題はその子divの上部にもほかの要素が加わり、その内容量が動的に変わるので、スクロールバーを出したいdivの高さを指定することができないのです。 高さを指定しなければ、overfllowでスクロールバーを出せません…。 cssで解決する方法は御座いますでしょうか？ お詳しい方、何卒ご教授下さい。 だいぶ簡略化したものですが、下記コードがイメージに近いです。 汚いコードですが・・・ <style type="text/css"> <!-- *{margin:0;padding:0;} --> </style> <body> <div style="width:500px;height:150px;border:1px solid #555;margin:10px;"> <p style="width:50px;height:150px;float:left;background:#ccc;">ナビ。float:leftしてます。</p> <div style="width:450px;float:left;"> <p>ここに文章や画像・リストがきます。高さはページごとに変わります。</p> <div style="border:1px solid #aaf;overfllow:scroll;">子divです。わかりやすいよう、overfllowはscrollにしてあります。<br /> （「親divの高さ」-「他の要素の高さ」）＜「本文の量」のとき、スクロールバーを表示させたいです。<br /> 高さを規定すべきですが、↑要素の内容量がページごとに変わるため、難しいです。<br /> cssのみで解決することは可能でしょうか？無理であれば、javascript等でも構いません。<br /> 何卒宜しくお願い致します。<br /> 本文本文本文<br />本文本文本文<br />本文本文本文<br />本文本文本文<br /> </div> </div> </div> </body>
- 締切済み
- CSS
- IEと同じようにFirefoxでもテーブルが表示されるには？
head内にスクロール非表示のタグを入れています。 http://aomi1111.sakura.ne.jp/temp/in/i106/index.htmlのような感じでノーフレームです。 IE7、IE6ではテーブルが画面の上から下まで表示されテーブル内でスクロールが出来ますが、Firefoxで見るとテーブルが画面下に飛び抜けてしまいテーブル内のスクロールが出ず、スクロール非表示にしてるので下が見れなくなってしまいます。上のサイトのように表示するにはどうすれば良いでしょうか？このテンプレートをノーフレームにしたいです。自分なりに(初心者です)いじくりすぎて原形がなくなりました。必要なさそうな(？)タグは載せていません。 ■CSS■ body,td,th{ font-size:70%; color:#444; font-family:Georgia,Verdana,Osaka,'MS P Gothic'; font-weight:normal; margin:0px;padding:0px; background:#fff url() repeat fixed; } body{text-align:center;} table{margin:auto;height:100%;} #table2{ filter:alpha(opacity=100); width:551px;height:100%; background:#fff; padding:0px 10px 0px 10px; overflow:auto; } #table3{ filter:alpha(opacity=90); background:#fff url() no-repeat; padding:0px; width:220px;height:100%; } ■top.html■ <head> <style type="text/css"> <!-- body{overflow:hidden;} --> </style> </head> <body> <★table cellspacing="0"> <tr><td> <div id="table2">左の本文</div> </td><td> <div id="table3">右メニュー</div> </td></tr> </table> </body> ★のtableを消してcssの#table内にfloat:left;margin-left:120px;等入れるとFirefoxでも表示されますが、その場合table2、table3を真ん中にこさせる方法が解りません。。。どなたか解る方がいましたらよろしくお願い致します。
- 締切済み
- HTML
お礼
詳しい説明をありがとうございます。 お聞きしたかったのは、正にAのことでした。 Table要素では出来ないんですね。 他にも色々とありがとうございます。 参考になりました。 回答ありがとうございます。