- ベストアンサー
html+CSSでテーブルのスクロール（位置固定）
助けてください。 たとえば、１０項目の列を持つテーブルがあったとします。 レコード件数は１００件だとします。 画面に表示できるのは５項目、１０件だとした場合、 そのテーブルに対して縦横スクロールバーを つけるのですが、その際に縦スクロールバーを下に動かした場合、 <th>列名だけはスクロールさせず、レコード部のみスクロールさせたいです。 また、横スクロールバーを右に動かした場合、５項目は固定で６項目目以降をスクロールさせたいです ※エクセルのウインドウ枠の固定 を適用したイメージ htmlとスタイルシートで実現できますでしょうか？
- rockman_se
- お礼率71% (10/14)
- CSS
- 回答数2
- ありがとう数5
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
その他の回答 (1)
- ORUKA1951
- ベストアンサー率45% (5062/11036)
そのような長いtableでしたら、 <table summary="何たらの表"> <caption>なんたら</caption> <thead> <tr> </tr> </thead> <tfoot> <tr> </te> <tfoot> <tbody> <tr> </tr> <tr> </tr> </tbody> </table> のようにマークアップされているはずです。 <thead>をfixedで固定してしまえば、期待通りになるはずです。ただIEという糞ブラウザはとても難しいです。 以前、 テーブルをスクロールさせるときのスクロールの位置 - HTML - 教えて！goo ( http://okwave.jp/qa/q7105490.html ) で散々悩まされました。 今はjQueryでそれを行うこともできるかと思います。 しかし、マークアップには<thead><tfoot>をきちんとマークアップしてください。印刷するとその効果がわかります。※なおscreen用のスタイルシートはmedia=screenに指定しておいたほうが良いです。もいしにちほせすにみかには適用しないようにしておかないと、折角のマークアップが役立ちません。
お礼
回答ありがとうございました！ IE６も実装できないといけなくて。。。 本当に貴重な情報提供していただきありがとうございます
関連するQ&A
- スクロールバーと列名の固定について
お世話になっております。 htmlで、エクセルの「window枠の固定」のような、 列名だけを固定し、列値のみにスクロールバーを表示 させるにはどうすればよいでしょうか？ 例えば、下記のソースがあったとすれば、 (1)の部分が固定し、(2)のみがスクロールバー で表示できる。 <table border="1"> <tr> <td>列名１</td> <!-- (1) --> <td>列名２</td> <!-- (1) --> <td>列名３</td> <!-- (1) --> </tr> <tr> <td>1</td> <!-- (2) --> <td>2</td> <!-- (2) --> <td>3</td> <!-- (2) --> </tr> <tr> <td>4</td> <!-- (2) --> <td>5</td> <!-- (2) --> <td>6</td> <!-- (2) --> </tr> </table>
- ベストアンサー
- HTML
- HTMLでテーブルを表示させようとしています。
HTMLでテーブルを表示させようとしています。 画像のような勤務状況がわかるテーブルをHTMLで表示させようとしています。 テーブルの数字項目は時刻を表しています。(9から18まであります) ブラウザの横スクロールは表示させたくないので テーブル内の一部項目(「No.」から「氏名」まで)を固定にして 横スクロールバーを表示させたいのです。 縦スクロールのサンプルを見つけ、 これを横に対応させればよいかと思ったのですが うまく表示させることが出来ませんでした。 一部項目を固定にして横スクロールバーを表示することは可能なのでしょうか？
- ベストアンサー
- HTML
- TABLEの縦横スクロール
エクセルでいうところの「ウィンドウ枠の固定」のように固定行・固定列があり、データ部分において縦横の両方向のスクロールができる表を作成したいのですが、どうにもこうにもできません。。。 どなたか教えてください。
- 締切済み
- HTML
- 【Excel2002】列を固定して縦スクロールさせない方法
ウインドウ枠の固定で１行目を固定しています。 それを維持したまま、A列を縦スクロールさせない方法はありますでしょうか。 セルのB2をアクティブにして『ウインドウ枠の固定』では ありません。 縦横いずれの方向にスクロールさせたときも １行目とA列は同時に固定されている、という状態にしたいのです。 過去ログを検索してみたのですが、なかなか見つかりません。 簡単なことを訊いているかもしれませんが、どうか御教授をお願い致します。
- 締切済み
- オフィス系ソフト
- ヘッダとフッタが固定でコンテンツのみスクロール可能
いつもお世話になります。 ヘッダ部とフッタ部は固定で、コンテンツ部のみで表示エリアを超えた場合スクロールバーを 表示する、というHTMLを実現するにはどうすればよいでしょうか。 （ウィンドウサイズに応じてコンテンツ部は変動するが、ヘッダとフッタは常に固定） イメージとしては以下の構成になります。いろいろ調べてみたのですが、ヘッダとフッタは固定 できてもスクロールバーがウィンドウ全体に表示されてしまうものばかりでした。 -------------------------------- ヘッダ（固定） （スクロールバーなし） -------------------------------- コンテンツ （スクロールバーあり） -------------------------------- フッタ（固定） （スクロールバーなし） -------------------------------- フレームは使用せず、CSSのみで実現する方法を教えて頂けませんでしょうか。 IE7、IE8で動作させたいと思っています。 宜しくお願いします。
- 締切済み
- CSS
- スクロール付のテーブルについて
お世話になっております、このたびデザインで少々てこづって下りまして、ご助力願いたく投稿させていただきました。 デザイン的には上が（画像の水色の部分）が固定で、下（ピンクの部分）に縦のスクロールバーを付けてはみ出した分が見えるようにする。 そして下のスクロールバーを動かすとはみ出した上、下両方が動くようにしたいのですが… どうしたものかと悩んでおります。 デザイン的には画像のようにしたいのですが…（一つ一つが離れているのは見やすくしたかったためです） 何か良い方法があれば教えてください。
- 締切済み
- HTML
- tableのヘッダを固定したい
IE6,7,8でテーブルのヘッダを固定したいのですが うまくいきません。 条件は以下のとおりです。 ・width: ?%として大きさを可変にする。 ・ヘッダを固定する。 ・ボディにはスクロールバーをつける これまでwidthは固定で作成してきたのですが 可変にする場合どのようなcssにすればよいのでしょうか。 よろしくお願いします。 <div id="container"> <div class="headerTable"> <table border="1" cellspacing="0" cellpadding="0"> <thead> <tr> <th>あ</th> <th>い</th> <th>う</th> <th>え</th> </tr> </thead> </table> </div> <div class="bodyTable"> <table border="1" cellspacing="0" cellpadding="0" width="100%"> <thead> </thead> <tbody> <tr> <td>あaaaaaa</td> <td>い</td> <td>う</td> <td>え</td> </tr> </tbody> </table> </div> </div>
- 締切済み
- HTML
- テーブルをスクロールさせるときのスクロールの位置
お世話になります。 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 の使用は避けて なおかつ，なるべくシンプルな方法が希望です。
- ベストアンサー
- HTML
- excelのスクロールバーが固定されてしまう
excelで一つのシートのスクロールバーが急に固定されてしまい、解除できなくて、困っています。 どういう状態かといいますと、データが下部まである場合、 通常、データ量によって、縦のスクロールバーの範囲がどんどん小さくなっていくはずですが、 なぜか、データがあるにも関わらず、スクロールバーが小さくなっていないので、 スクロールさせることができず、データの下部はキーボードの↓やPageDown等で セルを移動させなければいけない状態です。
- 締切済み
- その他（プログラミング・開発）
- ＡＳＰ．ＮＥＴでの縦・横スクロール
ヘッダーだけ別テーブルで記述し、DataGridを入れるDIVと全体を入れるDIVの二つで縦横スクロールを行っていますが、縦スクロールバーが 横スクロールしないと表示されない現象が発生しています。 これを横スクロールしないで常に縦スクロールバーが表示される方法はないものですか？ 開発環境：VS2005
- ベストアンサー
- Microsoft ASP
- プリンターEW-452Aの購入時、立ち上げにおいてシアンの色が全く出ていない
- ヘッドクリーニングやノズルチェック印刷を試しても変わらない
- EPSON社製品に関するトラブルです
お礼
リンク、ありがごうございました！ jqueryは使用したことがないので 勉強させていただきます。 本当に画面デザインは奥が深いというか難しいですね