- ベストアンサー
テーブルのスクロール位置を調整する方法
- IE限定の環境でテーブルのスクロール位置を調整する方法について教えてください。
- テーブルのヘッダを固定してスクロールバーを右に付け、スクロールの位置を調整したい場合の解決策を教えてください。
- IE 5.5や6などの低いバージョンでも正しく表示される、シンプルな方法でテーブルのスクロール位置を調整する方法を教えてください。
- BlurFiltan
- お礼率33% (2/6)
- HTML
- 回答数5
- ありがとう数1
- みんなの回答 （5）
- 専門家の回答
質問者が選んだベストアンサー
結論です。IEでは簡単には無理です。参考サイトは最後に書いておきます。 まず、データの多いtableは、<thead><tfoot><tbody>でマークアップすべきです。これは印刷したとき(ユーザーエージェントがページ媒体であるとき)に、それぞれのページに見出しを表示すべきだからです。先の回答を実際に印刷すると明白です。ページ媒体でスクロールは出来ませんから、overflowにscrollないしautoを指定した場合は、スタイルシートでスクリーン端末のみ適用されるよう記述することは必須です。スタイルシートのデフォルトはall(仕様書ではscreenですが、実装はallになっています。HTML5では allに変更される) 期待のように表示させるためには、本来はtbodyにoverflowを指定すればよいのですが、これはtable要素には使えないことになっています。(IEにはバグあり使えそうに見えます) そのため、スタイルシートでtbodyをblockに変換してやる必要があります。しかしその時点でIEは、tbodyの高さをtrに継承してしまうバグがあります。またスクロールバー自体が表示されません。 IEで期待通りの表らしき形にしたいのなら、table以外でマークアップしてすべての要素table,thead,tfoot,tbody,tr,td,th,col,cilgroup・・をブロックに下からスタイルシートで配置しなおさないとなりません。 当然ですが、スタイルシートを読まないブラウザ(テキストブラウザ、点字端末、読み上げソフト、そしてプリンター)や他の端末、検索エンジンには意味が通じないことになります。 仕方なく、table全体を<div>で囲って、thead部分をfixedで固定する方法も試したのですが、IEのみfixedで位置を決めない場合は影も形も消えうせてしまいます。--もちろん標準ブラウザではきちんと整形されます。 ｛IEのみで使えれば良いので，｝ は、印刷やその他すべてを犠牲にすれば、表の見出しと本体を別のtableにするなど、文書構造を無視したマークアップ・・あるいは、リストなどでマークアップすることになりますが、決してすべきではない邪道になります。 ☆tbodyをscrollさせる方法は下記サイトをご覧ください。 Tableのヘッダ(thead)を固定して、<tbody>内をスクロールさせる方法 » 株式会社ジラフィー(Giraffy) ( http://giraffy.jp/blog/2009/09/11/css/107/ ) 今回は質問ありがとうございます。自分自身よい勉強になりました。ＩＥがクソであることも再確認できたし・(笑)
その他の回答 (4)
- ORUKA1951
- ベストアンサー率45% (5062/11036)
役立ちそうなスタイルなので、個人的にも調べてみました。 ＩＥどのバージョンも、tableに関して致命的なバグがあるため、ウェブ標準(HTML4.01strict+CSS2.1)で作成し、他のブラウザすべてで同じに表示できる当たり前のことが出来ません。(opera,safari,firefox、IE5～10で確認) そのため、(想像したとおり)先に示したようにリストなど他のマークアップをしたものをblockで配置する以外に期待のことはできないと思われます。いまだにウェブデザイナーを悩まし続けるIE---。この世から消えてしまえばよいのに。 下記HTMLは、ウェブ標準です。リストでマークアップしたものとtableでマークアップしたものです。いずれも同じように表示されるべきですが、下のtableでのマークアップは、IEはすべてのバージョンでうまく表示できないのではないかと思います。 結論から言うと、本来はtable、特にthead,tbodyを使ってマークアップすべきででありながら、tableが使えません。theadやtbodyは印刷して２ページに分かれるような大きなtable--スクロールが必要なデータであっても、「tbodyのみスクロールさせることが不可能なのです」--実際に大きなデータの表を作成して印刷してみてください。 ★Another HTML-lint gateway( http://openlab.ring.gr.jp/k16/htmllint/htmllint.html ) ★The W3C Markup Validation Service( http://validator.w3.org/#validate_by_input ) でチェック済み <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> ＿<meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> ＿<title>サンプル</title> ＿<meta name="author" content="ORUKA1951"> ＿<meta http-equiv="Content-Style-Type" content="text/css"> ＿<link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" > ＿<link rel="START" href="../index.html"> ＿<style type="text/css" media="screen"> <!-- ol.table,ol.table ul,ol.table li{display:block;padding:0;margin:0;line-height:30px;list-style:none;} ol.table{width:410px;} ol.table li ul li{width:100px;border:solid 1px gray;float:left;} ol.table li{clear:left;} ol.table li ul li{clear:none;} ol.table li.head ul li{text-align:center;font-weight:bold;} ol.table li.body{height:94px;overflow:auto;width:426px;border-bottom:1px gray solid;} ol.table li.body ul li{padding:0 5px;width:90px;} ol.table li.body ul{clear:left;} table.scroll,table.scroll *{display:block;border:solid gray 1px;margin: 0;padding:0;line-height:30px;} table.scroll,table.scroll tr{width:410px;border:none;} table.scroll{margin-top:50px;border-bottom:1px solid gray;} table.scroll thead,table.scroll tbody{width:100%;border:none;} table.scroll tbody{height:94px;overflow:auto;width:428px;} table.scroll thead th,table.scroll tbody td{float:left;width:100px;} table.scroll tbody,table.scroll tbody tr{clear:left;} --> ＿</style> </head> <body> ＿<h1>サンプル</h1> ＿<ol class="table"> ＿＿<li class="head"> ＿＿＿<ul> ＿＿＿＿<li>あ行</li><li>か行</li><li>さ行</li><li>た行</li> ＿＿＿</ul> ＿＿</li> ＿＿<li class="body"> ＿＿＿<ul> ＿＿＿＿<li>あ</li><li>か</li><li>さ</li><li>た</li> ＿＿＿</ul> ＿＿＿<ul> ＿＿＿＿<li>い</li><li>き</li><li>し</li><li>ち</li> ＿＿＿</ul> ＿＿＿<ul> ＿＿＿＿<li>う</li><li>く</li><li>す</li><li>つ</li> ＿＿＿</ul> ＿＿＿<ul> ＿＿＿＿<li>え</li><li>け</li><li>せ</li><li>て</li> ＿＿＿</ul> ＿＿＿<ul> ＿＿＿＿<li>お</li><li>こ</li><li>そ</li><li>と</li> ＿＿＿</ul> ＿＿＿<ul> ＿＿＿＿<li>あ</li><li>か</li><li>さ</li><li>た</li> ＿＿＿</ul> ＿＿＿<ul> ＿＿＿＿<li>い</li><li>き</li><li>し</li><li>ち</li> ＿＿＿</ul> ＿＿＿<ul> ＿＿＿＿<li>う</li><li>く</li><li>す</li><li>つ</li> ＿＿＿</ul> ＿＿＿<ul> ＿＿＿＿<li>え</li><li>け</li><li>せ</li><li>て</li> ＿＿＿</ul> ＿＿＿<ul> ＿＿＿＿<li>お</li><li>こ</li><li>そ</li><li>と</li> ＿＿＿</ul> ＿＿</li> ＿</ol> ＿<table class="scroll" summary="scrollTbody"> ＿＿<thead> ＿＿＿<tr> ＿＿＿＿<th>あ行</th><th>か行</th><th>さ行</th><th>た行</th> ＿＿＿</tr> ＿＿</thead> ＿＿<tbody> ＿＿＿<tr> ＿＿＿＿<td>あ</td><td>か</td><td>さ</td><td>た</td> ＿＿＿</tr> ＿＿＿<tr> ＿＿＿＿<td>い</td><td>き</td><td>し</td><td>ち</td> ＿＿＿</tr> ＿＿＿<tr> ＿＿＿＿<td>う</td><td>く</td><td>す</td><td>つ</td> ＿＿＿</tr> ＿＿＿<tr> ＿＿＿＿<td>え</td><td>け</td><td>せ</td><td>て</td> ＿＿＿</tr> ＿＿＿<tr> ＿＿＿＿<td>お</td><td>こ</td><td>そ</td><td>と</td> ＿＿＿</tr> ＿＿＿<tr> ＿＿＿＿<td>あ</td><td>か</td><td>さ</td><td>た</td> ＿＿＿</tr> ＿＿＿<tr> ＿＿＿＿<td>い</td><td>き</td><td>し</td><td>ち</td> ＿＿＿</tr> ＿＿＿<tr> ＿＿＿＿<td>う</td><td>く</td><td>す</td><td>つ</td> ＿＿＿</tr> ＿＿＿<tr> ＿＿＿＿<td>え</td><td>け</td><td>せ</td><td>て</td> ＿＿＿</tr> ＿＿＿<tr> ＿＿＿＿<td>お</td><td>こ</td><td>そ</td><td>と</td> ＿＿＿</tr> ＿＿</tbody> ＿</table> </body> </html>
- ORUKA1951
- ベストアンサー率45% (5062/11036)
もう一つ データの関連性がなくなるので邪道ですが、ふたつのtableに分けて、それぞれをblockで囲むと言うほうが簡単でしょう。
- ORUKA1951
- ベストアンサー率45% (5062/11036)
table要素にoverflowは使えません。 Applies to: ＿block-level and replaced elements 11.1.1 はみ出した内容の扱い（Overflow: the 'overflow' property） ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/visufx.html#overflow ) リストでマークアップして、ブロックにしましょう。 ＿<ol class="table"> ＿＿<li class="body"> ＿＿＿<ul> ＿＿＿＿<li>あ</li><li>か</li><li>さ</li><li>た</li> ＿＿＿</ul> ＿＿＿<ul> ＿＿＿＿<li>い</li><li>き</li><li>し</li><li>ち</li> ＿＿＿</ul> ＿＿＿<ul> ＿＿＿＿<li>う</li><li>く</li><li>す</li><li>つ</li> ＿＿＿</ul> ＿＿＿<ul> ＿＿＿＿<li>え</li><li>け</li><li>せ</li><li>て</li> ＿＿＿</ul> ＿＿＿<ul> ＿＿＿＿<li>お</li><li>こ</li><li>そ</li><li>と</li> ＿＿＿</ul> ＿＿</li> ＿＿<li class="head"> ＿＿＿<ul> ＿＿＿＿<li>あ行</li><li>か行</li><li>さ行</li><li>た行</li> ＿＿＿</ul> ＿＿</li> ＿</table>
お礼
ORUKA1951 さん， 何度も回答してくださり感謝の気持ちでいっぱいです。 また お礼 が遅れましたことをお詫びいたします。 最初の ANo.1 の回答をくださったときに その先を自力で作成しようと思ってあがいてみたのですが 自力では何ともできず，その日は途方にくれておりました。 ANo.4 の回答を見て 初めてどうするのかがわかった次第でして...。 シンプルな記述でできるものなのですね。 びっくりしました。＆ 助かりました。 私，JavaScript (言語自体) は少々得意ですし， ActionScript は結構得意な方なのですが， HTML とか CSS とかは，本当難しい(じゃじゃ馬ならしみたい)ですね。。。 本当にありがとうございました。