締切済み

【CSSの難題】TABLEタグでヘッダを固定してデータ部だけスクロールする方法

2007/02/09 13:12

Excelなら「ウィンドウ枠の固定」でおなじみですが、これをHTMLで実現いたしたく。 ┏┳━━━━━━━┓ ┃┃行ヘッダ　　　　　┃ ┣╋━━━━━━━┫ ┃┃　　　　　　　　　　┃ ┃┃　　　　　　　　　　┃ ┃┃←列ヘッダ　　　┃ ┃┃　　　　　　　　　　┃ ┃┃　　　　　　　　　　┃ ┗┻━━━━━━━┛ ↑の図でいう行ヘッダなら、 http://blog.asura.co.jp/takehara/5219ac5dcee34422a506ab9f3df120df/entry.aspx で例示されている↓のサンプルで実現できそうですが、「列ヘッダ」の方も同時に http://www.asura.co.jp/demo/bodyscroll.html 1列目＆1行目を固定するには、CSSをどのように改変したらいいでしょうか？

litton101
お礼率89% (1106/1240)

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

回答全件

iframeを使ってみては？

2007/02/09 13:32

みんなの回答 （1）
専門家の回答

みんなの回答

1412lovers
ベストアンサー率40% (58/144)

2007/02/09 13:32 回答No.1

iframeを使ってみては？

参考URL：: http://www.htmq.com/html/iframe.shtml

質問者

お礼 2007/02/09 23:44

1412loversさん、ありがとうございます。 iframeやフレームは使わずに解決したいと思っています。せっかくお教えいただいたのにすみません。

全文を見る

ログインすると、全ての回答が全文表示されます。

関連するQ&A

【CSS】ヘッダ固定
CSSを使ってヘッダを実現したいです。検索サイトで探したところ、以下URLが実現したい事に近いです。 http://css.alsacreations.com/modeles/modele13.htm 上記サンプルはヘッダとボディーの比率をheight: 20%;　height: 80%;で指定してますが、私が実現したい事は、ヘッダのサイズを一行（文字の高さ）としたいのです。どうしたらよいでしょうか？
- 締切済み
- HTML
ヘッダー部の固定の方法
こちらの簡単なサンプルを参考にサイトを作成しています。 http://scuderia-web.com/tips/xhtml_css/sample/fixed_header_and_footer.html 私が作るとメイン部がヘッダーもフッターも突き抜けてスクロールしてしまいました。原因を調査したらフッター部は後から上書きすることで上側に配置される状態になり、固定していると分かりました。しかし、同じ考えをヘッダー部に当て嵌めてみても固定しません。その内に分かるかなと思って数ヶ月・・・未だにギブアップです。ヘッダー部はどういう理由で固定（上側に来る）されるのでしょう？なお、ヘッダー部にz-index:5 とかを割り当てれば固定してくれます。しかし、この解決法はちょっと強引な気がしています。
- ベストアンサー
- CSS
ヘッダとフッタが固定でコンテンツのみスクロール可能
いつもお世話になります。ヘッダ部とフッタ部は固定で、コンテンツ部のみで表示エリアを超えた場合スクロールバーを表示する、というHTMLを実現するにはどうすればよいでしょうか。（ウィンドウサイズに応じてコンテンツ部は変動するが、ヘッダとフッタは常に固定）イメージとしては以下の構成になります。いろいろ調べてみたのですが、ヘッダとフッタは固定できてもスクロールバーがウィンドウ全体に表示されてしまうものばかりでした。 -------------------------------- ヘッダ（固定）（スクロールバーなし） -------------------------------- コンテンツ（スクロールバーあり） -------------------------------- フッタ（固定）（スクロールバーなし） -------------------------------- フレームは使用せず、CSSのみで実現する方法を教えて頂けませんでしょうか。 IE7、IE8で動作させたいと思っています。宜しくお願いします。
- 締切済み
- CSS
［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
Tableタグで、一覧部分を縦横スクロールでヘッダー部分を固定で表示できますか？
すみません、お知恵を拝借させてください。 Tableタグで、一覧部分を縦横スクロールでヘッダー部分を固定で表示できますか？下記のソース1のように実現しようとしています。しかしDIVタグに任意の幅を設定(ソース2) すると、テーブルタグの各列に幅設定が出来なくなってしまいます。幅を設定することは可能か、設定方法をご存知ならば教えてください。 ※IE6限定で、JScript使用OKです。
- ベストアンサー
- HTML
javascriptの内容を教えてください
GridViewをクリック時に行／列の背景色を変えたく調べていたところ、以下のサンプルページを見つけました。「GridViewのMouseHoverで行/列をハイライトする」画面イメージ http://asp35.com/Samples/090306VB-2.aspx コード http://asp35.com/Samples/AjaxViewCode.aspx?file=090306VB-2.aspx まさにやりたいことではあったのですが、まだ.net初心者の為 javascriptがまったく読めません。 63行目に　$('table.yui-datatable-theme tr td').hover( とありますが、"yui-datatable-theme"とはgridviewのCss名のことと理解していいのでしょうか？どなたかこのページのjavascriptにコメントを入れてもらえないでしょうか？お願いします。
- ベストアンサー
- JavaScript
document.lastChild.appendChild()のIE5.5対応
任意のHTMLファイルの<body>内に <script type="text/javascript" src="sample.js" charset="shift_jis"></script> と書いたとき、そのHTMLファイルのヘッダに sample.cssへのlinkを定義できるように --------- sample.js ----------- sample_css=document.createElement('link'); sample_css.rel='stylesheet'; sample_css.href='/sample.css'; sample_css.type='text/css'; document.lastChild.firstChild.appendChild(sample_css); … --------- sample.js ----------- と書いたのですが、IE5.5で、 document.lastChild.firstChild.appendChild(sample_css); の行がエラーとなってしまいます。 IE5.5に対応できる書き方はないものでしょうか。
- ベストアンサー
- JavaScript
テーブルのヘッダの表示を固定してスクロールする方法
javaスクリプトを使わずにCSSのみで、テーブルのヘッダを固定する方法を探しております。ご存知の方がいらっしゃいましたら、お教え願います。
- ベストアンサー
- HTML
マウスが触ったら表中の1行の背景色変えたい
一覧表を作成しておりますが、その表のある列を触ったら、その列にあるすべてのセル（1行を選択したかのようなイメージ）の背景色を変えたいのですが、どのようにしたらよいでしょうか。できればＣＳＳで実現したいのですが、無理ならJavaScriptでも結構です。宜しくお願いいたします。
- 締切済み
- JavaScript
テーブルのヘッダ部分固定でデータ部分をスクロールしたい
テーブルのヘッダ(最初のTR部分)が固定でデータ部分(ヘッダ以下のTR)がスクロールにより移動できるようにしたいのですが可能でしょうか？フレーム分割で擬似的に作ることは可能と思いますがそれ以外で実現方法を探しております。よろしくお願いします。
- ベストアンサー
- HTML