IT技術Labo - HouseTect

Javaフリーエンジニアとしての苦悩や、アーキテクトになるための努力の軌跡を掲載しています。.NETとJavaに力を入れた技術情報発信ブログです。

スポンサーサイト


上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

2つのテーブルのスクロール位置を動機する方法


2つのテーブルのスクロール位置を動機する方法
↑の画像のように、2個のテーブルがあり、右側のテーブルのスクロール位置と左側のテーブルのスクロール位置とを動機させるためのサンプルHTMLです。

考え方はいたって簡単で、右側のDIVタグの「onscroll」イベントでDIVタグのスクロール位置を左側のDIVタグのスクロール位置に設定するだけです。

以外と業務系のアプリなどで、全カラムを横スクロールしたくない場合があるので、この方法を知っていると有効かと思います。

詳細は続きで。



<html>
<body>
<table border="0" style="background-color:black;">
<tr>
<td valign="top" style="background-color:white">
<div id="leftColumn" style="overflow:hidden;height:84px;">
<table cellspacing="1">
<tr>
<td>
ああああああああああああ
</td>
</tr>
<tr>
<td>
ああああああああああああ
</td>
</tr>
<tr>
<td>
ああああああああああああ
</td>
</tr>
<tr>
<td>
ああああああああああああ
</td>
</tr>
<tr>
<td>
ああああああああああああ
</td>
</tr>
<tr>
<td>
ああああああああああああ
</td>
</tr>
<tr>
<td>
ああああああああああああ
</td>
</tr>
</table>
</div>
</td>
<td style="background-color:white">
<div style="overflow:scroll;height:100;" onscroll="document.all.leftColumn.scrollTop=this.scrollTop;">
<table cellspacing="1">
<tr>
<td>
ああああああああああああ
</td>
</tr>
<tr>
<td>
ああああああああああああ
</td>
</tr>
<tr>
<td>
ああああああああああああ
</td>
</tr>
<tr>
<td>
ああああああああああああ
</td>
</tr>
<tr>
<td>
ああああああああああああ
</td>
</tr>
<tr>
<td>
ああああああああああああ
</td>
</tr>
<tr>
<td>
ああああああああああああ
</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</body>
</html>


このようなHTMLを使えば簡単に実現できます。

是非上記HTMLをローカルにコピーして、見てみてください。
スポンサーサイト



↓のボタンでこのブログの記事をランダムに表示します。

●Homeへ戻る●

COMMENT

Name
E-mail
URL
Comment
Pass  *
Secret? (管理者にだけ表示)
pingツール無料プレゼント ^^

こんにちはyes-netsの新井と申します。 

 無料情報戦略支援yesnetworkでは

 IPC入会100人超えを記念して限定で

 アクセスアップツール Ping一括送信 を

 プレゼントです。

 詳しくは http://yesnet.blog82.fc2.com/ です。




応援クリック♪
  • yes-nets ipc@yes#-
  • URL
  • 2007.04.10(Tue)
  • Edit

 yes-netsの新井です。 

 色々と試行錯誤なさっている人がいるようです。

 無料情報戦略支援yesnetworkでは

 本当に使えるソフトの紹介もしています。

 毎月2~3個のツールを開発しているメンバー

 ですのでQ
  • yes-nets ipc@yes#-
  • URL
  • 2007.04.10(Tue)
  • Edit

Pickup Link!

COUNTER



RSSの登録はこちらからどうぞ。
RSS

ブログ内の検索

Google

プロフィール

Hisasann

Author:Hisasann
かなり走り書きなブログで申し訳ないです。個人のメモ程度に使っていますが、よかったら参考にしてくださいね。メールまってま~す。

相互リンク募集しています。 下記メアドまでメールください。
Rastaman@Mixi
Rastaman@コトノハ
Rastaman@テクノラティ

アクセスランキング

ブログパーツ

ブログランキング



ブロとも申請フォーム


上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。