• ベストアンサー

<table>の<thead>を固定したい。

JSPで画面を生成しているのですが、検索結果の表で表のヘッダー部分を固定して表示したいのですが・・・。 表を作っている部分と別にテーブルをつくり表題だけを表示してみたのですが、縦スクロールに反応しないのはいいとして横スクロールに反応しないのが問題点で何とか横スクロールに連動できないか調べてるところです。 よろしかったら誰か教えてください。

  • HTML
  • 回答数2
  • ありがとう数2

質問者が選んだベストアンサー

  • ベストアンサー
  • NTJ
  • ベストアンサー率44% (46/103)
回答No.2

JavaScriptで一応対応可能です。 <BODY onscroll=""> <DIV id="HEAD" style="overflow-X:hidden;overflow-Y:scroll;width:500px"> <TABLE> 表題部 </TABLE> </DIV> <DIV onscroll="document.getElementById('HEAD').scrollLeft=this.scrollLeft;" style="overflow:scroll;width:500px"> <TABLE border> データ部 </TABLE> </DIV> こんな感じですね。 表題部でわざわざ無用な縦スクロールバーを表示している理由は外してみれば解ります(笑) 面倒なのでIE専用なコーディングですが・・・。

matui2000
質問者

お礼

ありがとうございます。Scriptには考えが行ってませんでした。

その他の回答 (1)

  • yambejp
  • ベストアンサー率51% (3827/7415)
回答No.1

現在のHTML技術には残念ながらエクセルのような テーブルの枠固定機能はありません。 テーブルをわけてdivのスタイルでスクロールを 調整するのが限界だと認知し、その範囲で ソースの可読性を高める工夫を検討してください。

matui2000
質問者

お礼

そうなんですか。 divについて調べてみます。 回答ありがとうございました。

関連するQ&A

  • 横のTableタグのヘッダを固定させる。

    こんにちは、k-makotoと申します。 TABLEタグの質問があるのですが ↓のようなTableタグを作成しているのですが、 ヘッダの部分(名前、住所、TEL、E-Mail)を 横スクロールさせたときでも固定で表示させたいのですが 方法はあるのでしょうか?(縦方向のやり方はわかるのですが...) ----------------------------------- |名前    |      |   | ----------------------------------- |住所    |      |   | ----------------------------------- |TEL    |      |   | ---------------------------------- |E-Mail  |     |   | ----------------------------------

    • ベストアンサー
    • HTML
  • <table>でスクロール連動をしたい

    おはよう御座います。 htmlテーブルの中に行、列の見出しと内容を 表示させ、テーブルをスクロールさせる際 見出しを見えるようにしたまま内容と 連動させたいのです。 (内容を横に動かせば横に見出しが動く) フレームでは↓のようにして実現可能なのですが テーブルではどのようにすればよいでしょうか? http://mmosuper.zenno.info/

  • ヘッダー・フッター固定でコンテンツのみ可変

    高さが固定されているヘッダーとフッターをウィンドウの上と下に固定したままで、その間のコンテンツ部分のみを縦方向に可変にする方法は考えられるでしょうか。つまり、 (ヘッダー+コンテンツ+フッター)の高さの合計=ウィンドウの高さ が常に成り立つ方法です。framesetでrowを指定すれば話は早いんですが、XHTMLで実現したいので使えません。 Javascriptを使ってウィンドウの高さを計算してからコンテンツ部分の高さを指定する方法もありますが、その場合はウィンドウのサイズを変えてしまうとヘッダーとフッターがウィンドウに連動せずに画面外や中途半端なところに残ってしまうので、それもだめかなと思いました。 とりあえずコンテンツ部分はどんなに高さが小さくなってもいいので、かなりウィンドウの高さが小さくても、常にヘッダーとフッターがきちんとウィンドウの上下に固定され、コンテンツ部分が可変になるような方法がありましたら教えてください。 ------------------------------- ヘッダー(固定) ------------------------------- コンテンツ(可変) ※この部分のみにスクロールバーが現れることができる。 ------------------------------- フッター(固定) -------------------------------

  • HTMLでテーブルを表示させようとしています。

    HTMLでテーブルを表示させようとしています。 画像のような勤務状況がわかるテーブルをHTMLで表示させようとしています。 テーブルの数字項目は時刻を表しています。(9から18まであります) ブラウザの横スクロールは表示させたくないので テーブル内の一部項目(「No.」から「氏名」まで)を固定にして 横スクロールバーを表示させたいのです。 縦スクロールのサンプルを見つけ、 これを横に対応させればよいかと思ったのですが うまく表示させることが出来ませんでした。 一部項目を固定にして横スクロールバーを表示することは可能なのでしょうか?

    • ベストアンサー
    • HTML
  • ASP.NETでの縦・横スクロール

    ヘッダーだけ別テーブルで記述し、DataGridを入れるDIVと全体を入れるDIVの二つで縦横スクロールを行っていますが、縦スクロールバーが 横スクロールしないと表示されない現象が発生しています。 これを横スクロールしないで常に縦スクロールバーが表示される方法はないものですか? 開発環境:VS2005

  • 【ASP.NET】GridViewのヘッダについて

    【ASP.NET】GridViewのヘッダを固定しつつ横スクロールもさせたいと考えています。 環境 OS:Windows XP Professional Edition Visual Studio 2005、ASP.NET2.0 Ajax Extention 1.0 ヘッダを固定させているGridViewがあります。 (固定方法を参考にしたサイト⇒http://blogs.yahoo.co.jp/ogiwara_hsk/32105274.html) これで固定できたGridViewをブラウザ上で見ていると一見何の問題もないのですが、 ブラウザの幅をGridViewの幅より狭くしたときに問題が起こりました。 ブラウザの幅をGridViewより狭くした場合、GridViewの下にスクロールバーが出て、それをスライドさせれば隠れてしまった部分を見ることができますが、その時ヘッダは一緒にスライドしてくれません。 ヘッダの固定する処理をなくせば当然一緒にスクロールしてくれますが、それだとヘッダの固定がされていないのでGridViewの右にある縦スクロールを下にずらすとヘッダがなくなってしまいます。 理想では、ヘッダを固定して縦スクロールをしてもヘッダが残り、かつ横にスクロールさせた時にはデータだけでなくヘッダも一緒にスライドしてほしいのです。 これはヘッダの「固定」をしてしまっているから無理なのでしょうか。 もし一緒に動かせる方法があれば教えてください。 よろしくお願いいたします。

  • html+CSSでテーブルのスクロール(位置固定)

    助けてください。 たとえば、10項目の列を持つテーブルがあったとします。 レコード件数は100件だとします。 画面に表示できるのは5項目、10件だとした場合、 そのテーブルに対して縦横スクロールバーを つけるのですが、その際に縦スクロールバーを下に動かした場合、 <th>列名だけはスクロールさせず、レコード部のみスクロールさせたいです。 また、横スクロールバーを右に動かした場合、5項目は固定で6項目目以降をスクロールさせたいです ※エクセルのウインドウ枠の固定 を適用したイメージ htmlとスタイルシートで実現できますでしょうか?

    • ベストアンサー
    • CSS
  • 縦は位置を固定で横はスクロールで見れるようにしたい

    縦は位置を固定で横だけスクロールで見れるようにしたいのですが、その方法はどうすればいいでしょうか。 position-y:fixed; position-x:absolute; と書いていますが目次が消えてしまいます。 position:fixed; これだけならうまくいきますが縦も横も固定されたままです。 目次を縦のときは固定でスクロールしても動かないようにしたいのですが、解像度が低いモニターのために横だけはスクロールしたときに横だけ全部見えるようにしたいです。 よろしくお願いいたします。

    • ベストアンサー
    • HTML
  • 一度検索されたものに対するソートについて

    こんにちは。php+mysqlで検索サイトを作っているんですが、初心者であり、スクリプトの書き方で困ってます。 「まず検索されたデータをweb上に表示させる。 表示された表のヘッダ部分(各名称)をクリックすると、表示されたものがソートされる。」 以前、各名称をクリックすることでソートさせるやり方が、掲載されていたのですが、一度検索条件によって出されたものに対しては、どのようにスクリプトを書けばよいのでしょうか?どなた様か教えていただけませんか? もうひとつ、これはいろいろ調べたことなんですが、表示された表のヘッダ部分を固定させて、ボディ部分だけをスクロールさせることは難しいのでしょうか? 分かりにくい質問ですみません。宜しくお願い致します。

    • ベストアンサー
    • PHP
  • テーブルのヘッダ部分固定でデータ部分をスクロールしたい

    テーブルのヘッダ(最初のTR部分)が固定でデータ部分(ヘッダ以下のTR)がスクロールにより移動できるようにしたいのですが可能でしょうか? フレーム分割で擬似的に作ることは可能と思いますがそれ以外で実現方法を探しております。 よろしくお願いします。

    • ベストアンサー
    • HTML

専門家に質問してみよう