横のＴａｂｌｅタグのヘッダを固定させる。

解決済

質問者：k-makoto
質問日時：2002/07/10 10:29
回答数：4件

こんにちは、k-makotoと申します。
ＴＡＢＬＥタグの質問があるのですが
↓のようなＴａｂｌｅタグを作成しているのですが、
ヘッダの部分（名前、住所、ＴＥＬ、Ｅ－Ｍａｉｌ）を
横スクロールさせたときでも固定で表示させたいのですが
方法はあるのでしょうか？（縦方向のやり方はわかるのですが．．．）

-----------------------------------
|名前　　　　|　　　　　　｜　　　｜
-----------------------------------
|住所　　　　|　　　　　　｜　　　｜
-----------------------------------
|ＴＥＬ　　　　|　　　　　　｜　　　｜
----------------------------------
|Ｅ－Ｍａｉｌ　｜　　　　　｜　　　｜
----------------------------------

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (4件)

No.4

回答者： lmeelm
回答日時：2002/07/12 12:32

自分の場合は、どこかで知ったものなどを使ってどんどん自分でサンプルを作って保存しています。

そのどこかが知りたいのだと思いますが、それをどこで知ったかといわれると、、、、
どこで知ったんでしょう？自分でもよくわからないんです。
マイクロソフトのページやリファレンス系サイトなどを探索していて、知らないものがあったりすると、
すぐにそれを使ってどんどん自分でサンプルのようなものを作成して身につけたといった感じでしょうか。
迷ったときなどは、それをいわばリファレンス代わりのようにして使っています。
あんまし、いいお答えじゃありませんね。すんませんです。

- 0
- 件

通報する

この回答へのお礼

お返事ありがとうございます。
現在の仕事でＨＴＭＬ、ＪａｖａＳｃｒｉｐｔを使うもの
があるので私もいろいろリファレンス系サイトなどを探索して
サンプルを自分の所に保存して置いておくようにします。

通報する

お礼日時：2002/07/12 14:50

No.3ベストアンサー

回答者： lmeelm
回答日時：2002/07/10 23:15

こんなんでどうでしょうか？？

<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>

- 0
- 件

通報する

この回答へのお礼

お返事ありがとうございます。
lmeelmさんからいただいたソースを元にいろいろと作ってみました。
縦、横のスクロールもできるみたいですね。
横
td4.style.pixelLeft = body.scrollLeft;
縦
td4.style.pixelTop = body.scrollTop;
貴重なサンプルをいただき誠にありがとうございました。
lmeelmさんにお聞きしたいのですが、
td1.style.pixelLeft = body.scrollLeft; のような文法はどうやって
調べたのでしょうか？
たとえば上のtd1に対するプロパティやbodyのメソッドなど
どこかのＨＰにリファレンスがあるのでしょうか？

通報する

お礼日時：2002/07/11 13:53

No.2

回答者： duckling
回答日時：2002/07/10 13:16

「左端の１行だけ残して横スクロールしたい」ということですよね？

残念ですが、HTML では出来ません。

左端の１行だけフレームで切って
残りの行を横スクロールするフレームに入れたらどうでしょう？

- 0
- 件

通報する

この回答へのお礼

お返事ありがとうございました。
最初はＨＴＭＬの<THEAD>,<TBODY>,<TFOOTER>とかを
使ってなんとかできないかと思っていましたが、
ＪａｖａＳｃｒｉｐｔでできそうなのでそれでやってみます。

通報する

お礼日時：2002/07/11 13:48

No.1

回答者： onimotsu
回答日時：2002/07/10 11:13

ご質問の意味が良く理解できないですみません。

（私の勉強不足です）

名前などの項目部分のサイズを固定するには
おのおのスタイルシートで指定すれば良いかと思います。

例えば下記のようになると思います。

<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もご参考に。

参考URL：http://tohoho.wakusei.ne.jp/wwwcss.htm