土曜の昼、学校帰りの昼メシの思い出

テーブルをスクロールさせるときのスクロールの位置

解決済

  • 質問者：BlurFiltan
  • 質問日時：
  • 回答数：5件

お世話になります。

IE限定の質問です。

テーブルのヘッダを固定してスクロールバーを右に付けるとします。
　↓例↓
===================================
<html>
<head>

<style type="text/css">
.FreezHeader
{
background-color:#ffffff;
position:relative;
top:expression(this.offsetParent.scrollTop);
z-index:10;
}
</style>

</head>
<body>

<div id="divFrame" style="overflow:auto; position:relative; width:100%; height:100px;">
<table cellspacing="0" cellpadding="0" width="100%" border="1">
<tr class="FreezHeader"><th>あ</th><th>か</th><th>さ</th></tr>
<tr><td>い</td><td>き</td><td>し</td></tr>
<tr><td>う</td><td>く</td><td>す</td></tr>
<tr><td>え</td><td>け</td><td>せ</td></tr>
<tr><td>お</td><td>こ</td><td>そ</td></tr>
<tr><td>あ</td><td>か</td><td>さ</td></tr>
<tr><td>い</td><td>き</td><td>し</td></tr>
<tr><td>う</td><td>く</td><td>す</td></tr>
<tr><td>え</td><td>け</td><td>せ</td></tr>
<tr><td>お</td><td>こ</td><td>そ</td></tr>
</table>
</div>

</body>
</html>
===================================


上記のような HTML を書いた場合，
【下の図】↓の「Ａ」のように表示されます。


「Ａ」のようにではなく
スクロールバーの位置(TOPの位置)をヘッダの下から開始させたいのです。
できれば 【下の図】↓の「Ｂ」のような感じで
それが難しいとした場合， 【下の図】↓の「Ｃ」のような感じです。

このように表示させる方法を教えていただきたく思います。


IEのみで使えれば良いので，
他のブラウザでの見え方は考えなくて良いです。
ただ，
IE 5.5 や 6 などなるべく低いバージョンでも見えるようにと
なるべく JavaScript の使用は避けて
なおかつ，なるべくシンプルな方法が希望です。

「テーブルをスクロールさせるときのスクロー」の質問画像
通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (5件)

No.5ベストアンサー

  • 回答者： ORUKA1951
  • 回答日時：

結論です。

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/ )

　今回は質問ありがとうございます。自分自身よい勉強になりました。ＩＥがクソであることも再確認できたし・(笑)
「テーブルをスクロールさせるときのスクロー」の回答画像5
    • good
    • 0
    • 件
通報する
この回答へのお礼

ORUKA1951 さん，
何度も回答してくださり感謝の気持ちでいっぱいです。
また お礼 が遅れましたことをお詫びいたします。

最初の ANo.1 の回答をくださったときに
その先を自力で作成しようと思ってあがいてみたのですが
自力では何ともできず，その日は途方にくれておりました。

ANo.4 の回答を見て
初めてどうするのかがわかった次第でして...。

シンプルな記述でできるものなのですね。
びっくりしました。＆ 助かりました。

私，JavaScript (言語自体) は少々得意ですし，
ActionScript は結構得意な方なのですが，
HTML とか CSS とかは，本当難しい(じゃじゃ馬ならしみたい)ですね。。。


本当にありがとうございました。

通報する
お礼日時：2011/11/02 18:40

No.4

  • 回答者： ORUKA1951
  • 回答日時：

　役立ちそうなスタイルなので、個人的にも調べてみました。


　ＩＥどのバージョンも、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. … )
★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>
    • good
    • 0
    • 件
通報する

No.3

  • 回答者： ORUKA1951
  • 回答日時：

　もう一つ


　データの関連性がなくなるので邪道ですが、ふたつのtableに分けて、それぞれをblockで囲むと言うほうが簡単でしょう。
    • good
    • 0
    • 件
通報する

No.2

  • 回答者： ORUKA1951
  • 回答日時：

画像添付忘れてました。


IE6以降対応、ウェブ標準ですから他のブラウザもOK
★table関連要素にoverflowは使えないので・・blockにしましょう。
　IE5にはサイズ計算でバグがあるため、tbodyに当たる部分が縮みます。
★スクロールバーを最後の列に入れると最後の列の巾が狭くなるので、入れないほうが良いでしょう。(左下)
「テーブルをスクロールさせるときのスクロー」の回答画像2
    • good
    • 0
    • 件
通報する

No.1

  • 回答者： ORUKA1951
  • 回答日時：

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 … )

リストでマークアップして、ブロックにしましょう。
＿<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>
    • good
    • 0
    • 件
通報する

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

このQ&Aを見た人はこんなQ&Aも見ています

関連するカテゴリからQ&Aを探す

ページトップページトップ

おすすめ情報

Q質問する（無料）

このQ&Aを見た人がよく見るQ&A

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報