- ベストアンサー
横のＴａｂｌｅタグのヘッダを固定させる。
こんにちは、k-makotoと申します。 ＴＡＢＬＥタグの質問があるのですが ↓のようなＴａｂｌｅタグを作成しているのですが、 ヘッダの部分（名前、住所、ＴＥＬ、Ｅ－Ｍａｉｌ）を 横スクロールさせたときでも固定で表示させたいのですが 方法はあるのでしょうか？（縦方向のやり方はわかるのですが．．．） ----------------------------------- |名前 | ｜ ｜ ----------------------------------- |住所 | ｜ ｜ ----------------------------------- |ＴＥＬ | ｜ ｜ ---------------------------------- |Ｅ－Ｍａｉｌ ｜ ｜ ｜ ----------------------------------
- k-makoto
- お礼率70% (21/30)
- HTML
- 回答数4
- ありがとう数7
- みんなの回答 （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もご参考に。
お礼
お返事ありがとうございます。 私の説明不足で申し訳ありませんでした。 私がしたかったのは 縦ｏｒ横のヘッダの部分（名前、住所）をブラウザのスクロールをさせても 常に画面に表示させるようにしたかったのです。（Ｅｘｃｅｌで列を固定するような）
関連するQ&A
- <table>の<thead>を固定したい。
JSPで画面を生成しているのですが、検索結果の表で表のヘッダー部分を固定して表示したいのですが・・・。 表を作っている部分と別にテーブルをつくり表題だけを表示してみたのですが、縦スクロールに反応しないのはいいとして横スクロールに反応しないのが問題点で何とか横スクロールに連動できないか調べてるところです。 よろしかったら誰か教えてください。
- ベストアンサー
- HTML
- 【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の右にある縦スクロールを下にずらすとヘッダがなくなってしまいます。 理想では、ヘッダを固定して縦スクロールをしてもヘッダが残り、かつ横にスクロールさせた時にはデータだけでなくヘッダも一緒にスライドしてほしいのです。 これはヘッダの「固定」をしてしまっているから無理なのでしょうか。 もし一緒に動かせる方法があれば教えてください。 よろしくお願いいたします。
- 締切済み
- Microsoft ASP
- 横長のコンテンツを含む場合のdivタグの指定方法
教えてください。横スクロールが発生するぐらい横に長い表組みを含むページがあるのですが、 そのテーブルを包むタグがdivの場合とtableの場合で、 見え方が異なるため困っています。 サンプル01（divタグで囲むと、横スクロール時に背景色が表示されない） http://www.oreryu.sakura.ne.jp/test/test01.html サンプル02（tableタグで囲むと、横スクロール時も背景が表示される） http://www.oreryu.sakura.ne.jp/test/test02.html やりたいことは ・divタグで囲んだ場合でも、tableタグ（サンプル02)のように、 横スクロール時に背景が見えるように設定できないか。 ということです。 divのwidth 100%はウィンドウサイズに合わせるため、挙動として正しいのは理解していますが、 このような場合はtableタグを使うしか方法はないのでしょうか。 現在作成中のページで、ヘッダーとフッターが消えてしまうため、 修正を求められており困っています。 そもそも横スクロールが発生しないようにすべきという回答は不要です。 ご存知の方がいましたら教えていただけますか。よろしくお願いいたします。
- ベストアンサー
- 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
- 縦は位置を固定で横はスクロールで見れるようにしたい
縦は位置を固定で横だけスクロールで見れるようにしたいのですが、その方法はどうすればいいでしょうか。 position-y:fixed; position-x:absolute; と書いていますが目次が消えてしまいます。 position:fixed; これだけならうまくいきますが縦も横も固定されたままです。 目次を縦のときは固定でスクロールしても動かないようにしたいのですが、解像度が低いモニターのために横だけはスクロールしたときに横だけ全部見えるようにしたいです。 よろしくお願いいたします。
- ベストアンサー
- HTML
- どんなタグを使えば？
掲示板に書込まれて送られてきた文章が折りかえされないで、ずーと長くなって表示されてしまいます。（横方向のスクロールが出る状態）テーブルの中に入れ込むようにはしてないのですが、ディスプレイの巾位に自動で折り返すようなことは出来るでしょうか？どんなタグを書けば良いのでしょうか？
- ベストアンサー
- HTML
- テーブルを2つ横に並べる
ホームページ作りに熱中しているのですが、テーブルを2つ横に並べる方法がよくわかりません。どうしても縦に連なってしまいます。 テーブルを横に並べるタグはあるのでしょうか？教えてくださいm(vv)m このテーブルを横に並べたいのですが・・・。 <table style="border:1px solid 色;background-color:white;" cellpadding="5"><tr><td> 文字を入れる </td></tr></table>
- ベストアンサー
- レンタルサーバ・ASP
- JavaScriptで縦固定と横スクロールしたい
CSSでは不可能とわかったのですが縦は位置を固定で横だけスクロールで見れるようにしたいのですが、その方法はどうすればいいでしょうか。 position-y:fixed; position-x:absolute; と書いていますがCSSでは目次が消えてしまいます。 そこでJavaScriptなら可能と聞きました。 目次を縦のときは固定でスクロールしても動かないようにしたいのですが、解像度が低いモニターのために横だけはスクロールしたときに横だけ全部見えるようにしたいです。 よろしくお願いいたします。
- ベストアンサー
- JavaScript
- ＡＳＰ．ＮＥＴでの縦・横スクロール
ヘッダーだけ別テーブルで記述し、DataGridを入れるDIVと全体を入れるDIVの二つで縦横スクロールを行っていますが、縦スクロールバーが 横スクロールしないと表示されない現象が発生しています。 これを横スクロールしないで常に縦スクロールバーが表示される方法はないものですか？ 開発環境：VS2005
- ベストアンサー
- Microsoft ASP
お礼
お返事ありがとうございます。 lmeelmさんからいただいたソースを元にいろいろと作ってみました。 縦、横のスクロールもできるみたいですね。 横 td4.style.pixelLeft = body.scrollLeft; 縦 td4.style.pixelTop = body.scrollTop; 貴重なサンプルをいただき誠にありがとうございました。 lmeelmさんにお聞きしたいのですが、 td1.style.pixelLeft = body.scrollLeft; のような文法はどうやって 調べたのでしょうか？ たとえば上のtd1に対するプロパティやbodyのメソッドなど どこかのＨＰにリファレンスがあるのでしょうか？