お世話になります。
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 を書いた場合,
【下の図】↓の「A」のように表示されます。
「A」のようにではなく
スクロールバーの位置(TOPの位置)をヘッダの下から開始させたいのです。
できれば 【下の図】↓の「B」のような感じで
それが難しいとした場合, 【下の図】↓の「C」のような感じです。
このように表示させる方法を教えていただきたく思います。
IEのみで使えれば良いので,
他のブラウザでの見え方は考えなくて良いです。
ただ,
IE 5.5 や 6 などなるべく低いバージョンでも見えるようにと
なるべく JavaScript の使用は避けて
なおかつ,なるべくシンプルな方法が希望です。
No.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/ )
今回は質問ありがとうございます。自分自身よい勉強になりました。IEがクソであることも再確認できたし・(笑)
ORUKA1951 さん,
何度も回答してくださり感謝の気持ちでいっぱいです。
また お礼 が遅れましたことをお詫びいたします。
最初の ANo.1 の回答をくださったときに
その先を自力で作成しようと思ってあがいてみたのですが
自力では何ともできず,その日は途方にくれておりました。
ANo.4 の回答を見て
初めてどうするのかがわかった次第でして...。
シンプルな記述でできるものなのですね。
びっくりしました。& 助かりました。
私,JavaScript (言語自体) は少々得意ですし,
ActionScript は結構得意な方なのですが,
HTML とか CSS とかは,本当難しい(じゃじゃ馬ならしみたい)ですね。。。
本当にありがとうございました。
No.4
- 回答日時:
役立ちそうなスタイルなので、個人的にも調べてみました。
IEどのバージョンも、tableに関して致命的なバグがあるため、ウェブ標準(HTML4.01strict+CSS2.1)で作成し、他のブラウザすべてで同じに表示できる当たり前のことが出来ません。(opera,safari,firefox、IE5~10で確認)
そのため、(想像したとおり)先に示したようにリストなど他のマークアップをしたものをblockで配置する以外に期待のことはできないと思われます。いまだにウェブデザイナーを悩まし続けるIE---。この世から消えてしまえばよいのに。
下記HTMLは、ウェブ標準です。リストでマークアップしたものとtableでマークアップしたものです。いずれも同じように表示されるべきですが、下のtableでのマークアップは、IEはすべてのバージョンでうまく表示できないのではないかと思います。
結論から言うと、本来はtable、特にthead,tbodyを使ってマークアップすべきででありながら、tableが使えません。theadやtbodyは印刷して2ページに分かれるような大きな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>
No.2
- 回答日時:
画像添付忘れてました。
IE6以降対応、ウェブ標準ですから他のブラウザもOK
★table関連要素にoverflowは使えないので・・blockにしましょう。
IE5にはサイズ計算でバグがあるため、tbodyに当たる部分が縮みます。
★スクロールバーを最後の列に入れると最後の列の巾が狭くなるので、入れないほうが良いでしょう。(左下)
No.1
- 回答日時:
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>
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
このQ&Aを見た人はこんなQ&Aも見ています
-
ゆるやかでぃべーと タイムマシンを破壊すべきか。
これはディベートの論題だと仮定したうえでの回答お願いします。あなたは、その末にタイムマシンを壊してしまうのか、使い道を探すのかどうかを考えてもらいたいです。
-
フォロワー20万人のアカウントであなたのあるあるを披露してみませんか?
あなたが普段思っている「これまだ誰も言ってなかったけど共感されるだろうな」というあるあるを教えてください
-
映画のエンドロール観る派?観ない派?
映画が終わった後、すぐに席を立って帰る方もちらほら見かけます。皆さんはエンドロールの最後まで観ていきますか?
-
海外旅行から帰ってきたら、まず何を食べる?
帰国して1番食べたくなるもの、食べたくなるだろうなと思うもの、皆さんはありますか?
-
天使と悪魔選手権
悪魔がこんなささやきをしていたら、天使のあなたはなんと言って止めますか?
-
テーブルの一部分のセルだけにスクロールバーを付けたいのですが、うまくいきません。
HTML・CSS
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・街中で見かけて「グッときた人」の思い出
- ・「一気に最後まで読んだ」本、教えて下さい!
- ・幼稚園時代「何組」でしたか?
- ・激凹みから立ち直る方法
- ・1つだけ過去を変えられるとしたら?
- ・【あるあるbot連動企画】あるあるbotに投稿したけど採用されなかったあるある募集
- ・【あるあるbot連動企画】フォロワー20万人のアカウントであなたのあるあるを披露してみませんか?
- ・映画のエンドロール観る派?観ない派?
- ・海外旅行から帰ってきたら、まず何を食べる?
- ・誕生日にもらった意外なもの
- ・天使と悪魔選手権
- ・ちょっと先の未来クイズ第2問
- ・【大喜利】【投稿~9/7】 ロボットの住む世界で流行ってる罰ゲームとは?
- ・推しミネラルウォーターはありますか?
- ・都道府県穴埋めゲーム
- ・この人頭いいなと思ったエピソード
- ・準・究極の選択
- ・ゆるやかでぃべーと タイムマシンを破壊すべきか。
- ・歩いた自慢大会
- ・許せない心理テスト
- ・字面がカッコいい英単語
- ・これ何て呼びますか Part2
- ・人生で一番思い出に残ってる靴
- ・ゆるやかでぃべーと すべての高校生はアルバイトをするべきだ。
- ・初めて自分の家と他人の家が違う、と意識した時
- ・単二電池
- ・チョコミントアイス
このQ&Aを見た人がよく見るQ&A
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
TRタグの余白をcssで設定するには
-
tableにul,または,olを入れられ...
-
値が0なら非表示にしたい
-
ホームページ 表の上の余白を...
-
テーブルの任意の列を非表示に...
-
テーブルの行を折りたたみたい...
-
テーブルの装飾
-
文字の中央そろえを一括で指定...
-
テーブルの表示がずれます
-
テーブルのヘッダとボディの幅...
-
テーブルの行の背景色をマウス...
-
htmlのtable内に画像
-
[CSS] tableの行の間隔をあける
-
テーブルのセルに画像をピッタ...
-
safariで特定条件下でデーブル...
-
Htmlのtd要素の中で半角の空...
-
divの中にtableを入れています...
-
ホームページビルダ14で、表の1...
-
テーブルの枠自体を折り曲げる
-
表の中の列の順番を入れ替える...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
テーブルの行を折りたたみたい...
-
tableにul,または,olを入れられ...
-
TRタグの余白をcssで設定するには
-
テーブルのヘッダとボディの幅...
-
テーブルの任意の列を非表示に...
-
cssで、表示されるテキストによ...
-
ホームページ 表の上の余白を...
-
tableでcolspanを使うと次行以...
-
中に<table></table>が使えるア...
-
html・cssで日付をキレイに揃え...
-
テーブルの行の高さを指定する...
-
テーブルタグのセルの幅の一部...
-
文字列が入っているtdを削除せ...
-
逆L字の表(table)組み
-
テーブルのセルに画像をピッタ...
-
EXCELのセル内にHTMLタグを含む...
-
テーブルタグの中に<ol><li>を...
-
HTML <td></td>タグ セル内余...
-
テーブルの表示がずれます
-
テーブルの装飾
おすすめ情報