- ベストアンサー
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; } とやってみたのですが、どうしてもスクロールバーが表示されません。何が足りないのか、もしくは根本から間違っているのかがわかりません。 ご存知の方教えて下さい。
- みんなの回答 （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>
お礼
早速のご回答ありがとうございます。 やってみたのですが、出来ませんでした。 何分初心者なもので…すみません。 でも参考になりました。 もう少し出来るかどうかやってみます。
お礼
詳しい説明をありがとうございます。 お聞きしたかったのは、正にAのことでした。 Table要素では出来ないんですね。 他にも色々とありがとうございます。 参考になりました。 回答ありがとうございます。