- ベストアンサー
Tableタグで、一覧部分を縦横スクロールでヘッダー部分を固定で表示できますか？
すみません、お知恵を拝借させてください。 Tableタグで、一覧部分を縦横スクロールでヘッダー部分を固定で表示できますか？ 下記のソース1のように実現しようとしています。しかしDIVタグに任意の幅を設定(ソース2) すると、テーブルタグの各列に幅設定が出来なくなってしまいます。幅を設定することは可能 か、設定方法をご存知ならば教えてください。 ※IE6限定で、JScript使用OKです。
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
その他の回答 (2)
- EUR
- ベストアンサー率61% (29/47)
ソース1の場合、テーブルにDIVのサイズを合わせているようです。 ソース2の場合は、DIVのサイズを固定しているようですね。 overflowについてですが、autoと設定すると、ブラウザに依存した動作を行います。 layerの場合、overflow:auto;としていますので、ヘッダーのテーブルに空白がある分を勝手に削ってしまい、折角設定したセルの幅を勝手に縮められています。 しかしregionの場合、overflow-x:scroll; overflow-y:scroll;がありますので、表示できなかった部分はスクロールで表示し、勝手にセルを縮めたりはしません。 よってヘッダーとデータのセルの幅に違いが出てきてしまいます。 ソース１がうまくいっている要因としては、テーブルにDIVのサイズをあわせているので、勝手に縮める必要がないからです。 で、ここから質問なのですが、ヘッダーとデータのセルの幅を合わせる方法として、 １．ヘッダーもoverflow:scroll;として、データのセルに大きさをあわせる ２．データのセルを折り返しで出力して、ヘッダーのセルに大きさをあわせる の2通り考えられると思います。 どちらがいいのでしょうか？
補足
回等ありがとうございます。助かります。 欲しいのは、1?になります。間違いないように、欲しいものを補足説明しますと 要件としては ・1024*768の画面で表示したい。 ・横幅は、12ヶ月分のデータ＋四半期計＋上下期＋年度計を表示したい。 →48列あります。折り返しては見難くなるので、幅を固定して表示したい。 表示する(レイヤーの)横幅を固定して、横長の表を見たいのです。
- poeyama
- ベストアンサー率0% (0/1)
ソース添付ください
補足
ソース1) <html> <head> <script language="JavaScript"> function initialize(){ var data = document.getElementById("data"); var header = document.getElementById("header"); var cell = data.rows[0].cells; var wkWidth; for(var i=0; i<cell.length; i ++){ wkWidth = cell[i].offsetWidth; header.rows[0].cells[i].width = wkWidth ; cell[i].width = wkWidth ; } with( document.getElementById("region") ){ document.getElementById("layer").style.width = header.offsetWidth + "px"; style.width = header.offsetWidth + "px"; wkWidth = header.offsetWidth + (offsetWidth - data.offsetWidth); style.width = wkWidth + "px"; } } </script> </head> <body onload="initialize();"> <div id="layer" style="border:1px; overflow-x:hidden;overflow-y:hidden; overflow:auto;"> <table id="header" style="margin:0px;" rules="all" border="1"> <tr><td>1</td><td>2</td><td>3</td></tr> </table> </div> <div id="region" style="height:80px; overflow-x:scroll; overflow-y:scroll; overflow:auto;" onScroll="layer.scrollLeft = region.scrollLeft;"> <table id="data" style="margin:0px;" rules="all" border="1"> <tr><td>ABCDEFABCDEFABCDABCDEFABCDEF</td><td>ABCDEFABCDEFABCEFABCDEFABCDEF</td><td>ABCDEFABCDEFABCDEFABCDEF</td></tr> </table> </div> </body> </html> ソース2）関数内を一部書き換え // with( document.getElementById("region") ){ // ・ // } document.getElementById("layer").style.width = "585px"; document.getElementById("region").style.width = "600px";
関連するQ&A
- テーブルのヘッダ部分固定でデータ部分をスクロールしたい
テーブルのヘッダ(最初のTR部分)が固定でデータ部分(ヘッダ以下のTR)がスクロールにより移動できるようにしたいのですが可能でしょうか？ フレーム分割で擬似的に作ることは可能と思いますがそれ以外で実現方法を探しております。 よろしくお願いします。
- ベストアンサー
- HTML
- ASPにて、DIVタグを使って一覧に縦スクロールバーをつけた画面を作成
ASPにて、DIVタグを使って一覧に縦スクロールバーをつけた画面を作成しています。 このDIVタグのStyleにて高さや幅をpx形式で指定して正常に表示できているのですが、解像度の異なるPCで使用するため％形式に変更したのですが、一覧が表示されなくなってしまいました。 syileのheightやeidthは％指定できないのでしょうか。 また、％指定と同様のことが別の方法で実現できるでしょうか。 ご存じの方、よろしくお願いします。
- ベストアンサー
- Microsoft ASP
- 横のＴａｂｌｅタグのヘッダを固定させる。
こんにちは、k-makotoと申します。 ＴＡＢＬＥタグの質問があるのですが ↓のようなＴａｂｌｅタグを作成しているのですが、 ヘッダの部分（名前、住所、ＴＥＬ、Ｅ－Ｍａｉｌ）を 横スクロールさせたときでも固定で表示させたいのですが 方法はあるのでしょうか？（縦方向のやり方はわかるのですが．．．） ----------------------------------- |名前 | ｜ ｜ ----------------------------------- |住所 | ｜ ｜ ----------------------------------- |ＴＥＬ | ｜ ｜ ---------------------------------- |Ｅ－Ｍａｉｌ ｜ ｜ ｜ ----------------------------------
- ベストアンサー
- HTML
- スクロールバー内のフォント表示について
タグ打ち初心者です。 スクロール画面の設定はできたのですが、 その中のフォントのサイズや行によって色の変更などはどうやるのでしょうか？ あと、スクロールのタグもいろいろあるみたいですが何がどう違うのでしょうか。divとか？ よろしくお願いします。
- 締切済み
- HTML
- ［CSS］ヘッダー固定＋コンテンツの縦位置可変
CSSでのヘッダー固定に関する質問です。 ヘッダーを固定表示しつつ、ヘッダーの縦幅が文字サイズの可変などで大小した時に それにあわせてその下部の固定じゃないコンテンツ部分の縦の位置が 調整されるようにCSSで組むことは可能でしょうか？ ヘッダー固定関連を調べてみたのですが、 条件に合うものがうまく見つけられなかったので、 恐れ入りますが質問させていただきました。 添付画像のような処理を行いたいと思っています。 ●文字サイズ可変に対応できない例 #header{ position:fixed; (またはposition:absolute;) width:100%; height:100px;" } #content{ width:100%; margin:100px 0 0;(またはpadding) } <body> <div id="header" >******</div> <div id="content">*****</div> </body> これだと#header内の文字サイズが大きくなった場合、枠からはみ出してしまいます。 現在はこれを用いています。（IE6対応などは行っています） ●文字サイズ可変に対応出来るが、固定部分に対応出来ない？ http://www.rr.iij4u.or.jp/~kazumix/d/css/sample/header_footer.html こちらのやり方？ ●やりたいこと <body> <div id="header"> <div id="header1">テキスト テキスト テキスト</div> <div id="header2">画像や動画など縦幅は固定</div> <div id="header3">テキスト テキスト テキスト</div> </div> <div id="content">******</div> </body> この形で、 header1とheader3はテキストが入るのでfirefox等の ブラウザの文字サイズ変更にて縦幅が可変しますが、 header2は常に縦幅が固定(100pxなど)です。 この条件の#headerの高さに応じて、スクロールバーが一番上にある状態の時は #content部分が常にピタッと#headerの下にひっついた状態にしたいです。 （スクロールバーは#content部分ではなく、body全体に出る形） この条件で、CSSのみで、ヘッダー固定を実現することは可能でしょうか？ htmlの書き方は見た目が実現可能であれば必ずしも●やりたいこと の部分のものと同じでなくてもかまいません。 js等必要でしょうか？ ご存知の方、ご教授いただけますと幸いでございます。
- ベストアンサー
- CSS
- ヘッダー画像固定のもう一枚画像を重ねる
ホームページ作成初心者です。（ビルダーでなく手打ちの作成方法です。）ヘッダー画像上部固定をしていまして、さらにセンタリングもして全体を中央寄せしてます。そのヘッダー画像にもう一枚リンク用の画像をヘッダー画像右側に重ねたいのですが、重ねると、重ねた画像に対して、ヘッダー画像で効いている固定、中央寄せが反映されません。ズームアウトするとどんどんその重ねた画像のみ、遠ざかっていきます・・・・・・ 原因はDIVのヘッダーの部分が100%のwidthになっているため、重ねる画像のposition:absolute;で場所を指定すると、ズームアウトしていくことにより、ずれが生じてくるのかなと思っています。 かと言ってヘッダー画像を本来の画像の大きさのPXの幅にすると上部で固定はできますが、センタリングが効かなくなります・・・ ヘッダー上部固定センタリング効かせつつ、リンク用の小さい画像をそのヘッダー画像に重ねる方法（そのリンク画像はそのヘッダー画像の決められた位置で固定）を知っておられる方、お知恵を拝借できませんでしょうか。 宜しくお願い申し上げます。
- ベストアンサー
- ホームページ作成ソフト
- ヘッダー・フッター固定HTMLに関して
ヘッダー・フッター固定HTMLに関して ヘッダー・フッター固定で（間）中段にFlashコンテンツを横100%縦100%で表示するHTMLを作成しようと思っております。 そこで、下記のHTMLソース、及びCSSで指定しているのですが、上手くいきません。 ヘッダー・フッター固定はできますが、Flashを表示しようとすると思うようにいきません。 「body > #wrapper」を「height:auto;」にすると、Flash部分の高さが小さく、 「body > #wrapper」を「height:100%;」にすると、フッター部分が消えてしまします。 【HTML】 ～～～～～～～～ <div id="head">～ヘッダー～</div> <div id="flashcontents">～Flashデータ～</div> <div id="foot">～フッター～</div> ～～～～～～～～ 【CSS】 ～～～～～～～～ html,body {margin:0; padding:0; overflow:hidden;} #head{～サイズなどを指定～} #flashcontents{margin: 0; height: 100%; width: 100%;} body > #flashcontents {height:100％; position: absolute;} #contents { position: fixed; overflow:hidden; bottom:0; 他サイズなど指定…} ～～～～～～～～ 以上、分かりにくい説明かと思いますが、もしお分かりになれば教えて頂けますでしょうか？ よろしくお願い致します。
- 締切済み
- CSS
- overflow内でのページ遷移したときに頭部分へスクロールさせたい
商品一覧をoverflow:autoとしたdivタグの中に表示しています。 その中で次の10件というボタンを用意しAjaxで取得した情報をそのdivタグ内に反映するといった処理になります。 しかし、ブラウザのキャッシュによりスクロール位置を覚えているため次の10件に切り替えてもスクロールさせた位置で表示されます。 それをどうにか次のページを表示した場合にはY軸でのスクロール位置は上から０の位置にしたいのですが、だれか教えてもらえないでしょうか？ google maps での店舗検索結果ではこれができていまいたが、ソースが解読できずでして…。
- 締切済み
- JavaScript
- ヘッダー・フッター固定でコンテンツのみ可変
高さが固定されているヘッダーとフッターをウィンドウの上と下に固定したままで、その間のコンテンツ部分のみを縦方向に可変にする方法は考えられるでしょうか。つまり、 （ヘッダー＋コンテンツ＋フッター）の高さの合計＝ウィンドウの高さ が常に成り立つ方法です。framesetでrowを指定すれば話は早いんですが、XHTMLで実現したいので使えません。 Javascriptを使ってウィンドウの高さを計算してからコンテンツ部分の高さを指定する方法もありますが、その場合はウィンドウのサイズを変えてしまうとヘッダーとフッターがウィンドウに連動せずに画面外や中途半端なところに残ってしまうので、それもだめかなと思いました。 とりあえずコンテンツ部分はどんなに高さが小さくなってもいいので、かなりウィンドウの高さが小さくても、常にヘッダーとフッターがきちんとウィンドウの上下に固定され、コンテンツ部分が可変になるような方法がありましたら教えてください。 ------------------------------- ヘッダー（固定） ------------------------------- コンテンツ（可変） ※この部分のみにスクロールバーが現れることができる。 ------------------------------- フッター（固定） -------------------------------
- 締切済み
- HTML
- スクロールするテーブルに背景画像を固定させたいのです
ＨＴＭＬでテーブルを作り、スクロールできる仕様にしました。そこに背景画像を入れたのですが、スクロールの際に一緒に背景画像もスクロールしてしまいます。 文字などだけをスクロール可能にして、背景画像を固定にする方法を知っている方は教えてください。 私のソースは下記です。よろしくお願いします。 <html> <TABLE border="0" width="695" background="top-6.GIF"> <TR><TD width="72" height="34"></TD><TD width="623" height="34"><font color="red"><b><center>お知らせ</center></b></font></TD></TR> </TABLE> </DIV> </DIV> <!--本体部分--> <DIV style="overflow-y:scroll;direction:ltr;width:695;height:114px"> <DIV style="direction:ltr"> <TABLE border="0" width="695" background="top-7.GIF" style="background-attachment: fixed"> <TR><TD width="72">A</TD><TD width="623">B</TD></TR> <TR><TD>C</TD><TD>D</TD></TR> <TR><TD>E</TD><TD>F</TD></TR> <TR><TD>G</TD><TD>H</TD></TR> <TR><TD>I</TD><TD>J</TD></TR> <TR><TD>K</TD><TD>L</TD></TR> <TR><TD>M</TD><TD>N</TD></TR> <TR><TD>O</TD><TD>P</TD></TR> </TABLE> <DIV style="overflow-y:scroll;direction:ltr;width:695; scrollbar-base-color:#FFFFFF; scrollbar-track-color:#FFFFFF; scrollbar-face-color:#FFFFFF; scrollbar-shadow-color:#FFFFFF; scrollbar-darkshadow-color:#FFFFFF; scrollbar-highlight-color:#FFFFFF; scrollbar-3dlight-color:#FFFFFF; scrollbar-arrow-color:#FFFFFF"> <DIV style="direction:ltr"> </DIV> </DIV> </html>
- ベストアンサー
- レンタルサーバ・ASP
お礼
ありがとうございます。とても助かりました。 実現できない場合は、n行おきにヘッダーを挿入する必要があったため。 セル結合しているものを分断するという複雑な処理を実装せねばなりま せんでした。(必ず1画面にひとつはヘッダーがあることの保証も難しい) もう少し検証し問題なければ導入に踏み切ろうと思います。勉強になりま した。すばやい回等、重ね重ね感謝します。
補足
ありがとうございます。 なるほど、この方法なら実現できそうです。感謝します。 最終的にdata部分に折り返しが入った場合に、問題がありましたので先に幅設定を することで回避しています。 function initialize(){ var data = document.getElementById("data"); var header = document.getElementById("header"); var cell = data.rows[0].cells; var wkWidth; document.getElementById("layer").style.width = "485px"; document.getElementById("region").style.width = "500px"; for(var i=0; i<cell.length; i ++){ wkWidth = cell[i].offsetWidth; header.rows[0].cells[i].width = wkWidth; cell[i].width = wkWidth ; } //↓↓↓ １．ヘッダーのサイズを固定しました header.style.width = data.offsetWidth; } すばらしい！！