- ベストアンサー
横のＴａｂｌｅタグのヘッダを固定させる。
こんにちは、k-makotoと申します。 ＴＡＢＬＥタグの質問があるのですが ↓のようなＴａｂｌｅタグを作成しているのですが、 ヘッダの部分（名前、住所、ＴＥＬ、Ｅ－Ｍａｉｌ）を 横スクロールさせたときでも固定で表示させたいのですが 方法はあるのでしょうか？（縦方向のやり方はわかるのですが．．．） ----------------------------------- |名前 | ｜ ｜ ----------------------------------- |住所 | ｜ ｜ ----------------------------------- |ＴＥＬ | ｜ ｜ ---------------------------------- |Ｅ－Ｍａｉｌ ｜ ｜ ｜ ----------------------------------
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
こんなんでどうでしょうか？？ <HTML> <HEAD> <TITLE>横スクロールしないセル</TITLE> <SCRIPT LANGUAGE="JavaScript"> function tdScroll(){ td1.style.pixelLeft = body.scrollLeft; td2.style.pixelLeft = body.scrollLeft; td3.style.pixelLeft = body.scrollLeft; td4.style.pixelLeft = body.scrollLeft; } </SCRIPT> <STYLE TYPE="text/css"> #td1,#td2,#td3,#td4{position:relative;} </STYLE> </HEAD> <BODY id="body" onscroll="tdScroll()"> <TABLE border="1" width="200%"> <TR> <TD width="100" id="td1">名前</TD> <TD></TD> <TD></TD> <TD></TD> <TD></TD> <TD></TD> <TD></TD> <TD></TD> </TR> <TR> <TD id="td2">住所</TD> <TD></TD> <TD></TD> <TD></TD> <TD></TD> <TD></TD> <TD></TD> <TD></TD> </TR> <TR> <TD id="td3">TEL</TD> <TD></TD> <TD></TD> <TD></TD> <TD></TD> <TD></TD> <TD></TD> <TD></TD> </TR> <TR> <TD id="td4">MAIL</TD> <TD></TD> <TD></TD> <TD></TD> <TD></TD> <TD></TD> <TD></TD> <TD></TD> </TR> </TABLE> </BODY> </HTML>
その他の回答 (3)
- lmeelm
- ベストアンサー率52% (18/34)
自分の場合は、どこかで知ったものなどを使ってどんどん自分でサンプルを作って保存しています。 そのどこかが知りたいのだと思いますが、それをどこで知ったかといわれると、、、、 どこで知ったんでしょう？自分でもよくわからないんです。 マイクロソフトのページやリファレンス系サイトなどを探索していて、知らないものがあったりすると、 すぐにそれを使ってどんどん自分でサンプルのようなものを作成して身につけたといった感じでしょうか。 迷ったときなどは、それをいわばリファレンス代わりのようにして使っています。 あんまし、いいお答えじゃありませんね。すんませんです。
お礼
お返事ありがとうございます。 現在の仕事でＨＴＭＬ、ＪａｖａＳｃｒｉｐｔを使うもの があるので私もいろいろリファレンス系サイトなどを探索して サンプルを自分の所に保存して置いておくようにします。
- duckling
- ベストアンサー率47% (88/185)
「左端の１行だけ残して横スクロールしたい」ということですよね？ 残念ですが、HTML では出来ません。 左端の１行だけフレームで切って 残りの行を横スクロールするフレームに入れたらどうでしょう？
お礼
お返事ありがとうございました。 最初はＨＴＭＬの<THEAD>,<TBODY>,<TFOOTER>とかを 使ってなんとかできないかと思っていましたが、 ＪａｖａＳｃｒｉｐｔでできそうなのでそれでやってみます。
- onimotsu
- ベストアンサー率36% (279/758)
ご質問の意味が良く理解できないですみません。（私の勉強不足です） 名前などの項目部分のサイズを固定するには おのおのスタイルシートで指定すれば良いかと思います。 例えば下記のようになると思います。 <TABLE border="1" style='font-size : 12px;font-family : "ＭＳ Ｐゴシック";width : 500px;height : 200px;top : 40px;left : 10px;' width="785" height="203"> <TBODY> <TR> <TD style="width : 100px;height : 20px;">名前</TD> <TD></TD> <TD></TD> </TR> <TR> <TD style="width : 100px;height : 20px;">住所</TD> <TD></TD> <TD></TD> </TR> <TR> <TD style="width : 100px;height : 20px;">ＴＥＬ</TD> <TD></TD> <TD></TD> </TR> <TR> <TD style="width : 100px;height : 20px;">Ｅ－Ｍａｉｌ</TD> <TD></TD> <TD></TD> </TR> </TBODY> </TABLE> 下記URLもご参考に。
お礼
お返事ありがとうございます。 私の説明不足で申し訳ありませんでした。 私がしたかったのは 縦ｏｒ横のヘッダの部分（名前、住所）をブラウザのスクロールをさせても 常に画面に表示させるようにしたかったのです。（Ｅｘｃｅｌで列を固定するような）
お礼
お返事ありがとうございます。 lmeelmさんからいただいたソースを元にいろいろと作ってみました。 縦、横のスクロールもできるみたいですね。 横 td4.style.pixelLeft = body.scrollLeft; 縦 td4.style.pixelTop = body.scrollTop; 貴重なサンプルをいただき誠にありがとうございました。 lmeelmさんにお聞きしたいのですが、 td1.style.pixelLeft = body.scrollLeft; のような文法はどうやって 調べたのでしょうか？ たとえば上のtd1に対するプロパティやbodyのメソッドなど どこかのＨＰにリファレンスがあるのでしょうか？