- PR -

HTML の TABLE で ウィンドウ枠の固定(?)

投稿者投稿内容
KaNi
常連さん
会議室デビュー日: 2003/06/04
投稿数: 36
お住まい・勤務地: 埼玉県
投稿日時: 2003-11-11 17:16
のおぉ

やりたかったまんまです。
スレ上げた本人がヘロヘロしているのに申し訳ないやらなんと言って良いやら。

ありがとうございました。の一言です。はい。
ほむら
ぬし
会議室デビュー日: 2003/02/28
投稿数: 583
お住まい・勤務地: 東京都
投稿日時: 2003-11-27 12:22
ども、ほむらです。
先の投稿にちょっとした勘違いがあるようでしたので
別の方法も書いておきます。
先の投稿でスクリプトが必要だったのはあくまで動的であったためです。
以下のように静的であればスクリプトは必要ありません。
個人的には静的としたほうがHTMLらしくてすきなんですが。。。
コード:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3c.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<style>
div.region {
height:7em;
border: 2px solid black;
overflow-x:hidden; overflow-y:auto; overflow:auto;
}
table.head, table.data { margin:0px; }
table.head { background-color:#a0a0e0; }
table.data { background-color:#a0e0a0; }
</style>
</head>
<body>
<table style="width:0*;" cellspacing="0px;" cellpadding="0px;">
<thead>
<tr>
<td>
<table class="head" rules="all" border="1">
<colgroup>
<col span="2" style="width:13em;" />
<col style="width:3em;" />
</colgroup>
<tbody>
<tr><td>1</td> <td>2</td> <td>3</td></tr>
</tbody>
</table>
</td>
</tr>
</thead>
<tbody>
<tr>
<td>
<div class="region">
<table class="data" rules="all" border="1">
<colgroup>
<col span="2" style="width:13em;"/>
<col style="width:3em;" />
</colgroup>
<tbody>
<tr><td>あ13</td> <td>い2</td> <td>う3</td></tr>
<tr><td>ああああああああああああ1</td> <td>い2</td> <td>う3</td></tr>
<tr><td>え1</td> <td>お2えええええええええええ</td> <td>か3</td></tr>
<tr><td>あ13</td> <td>い2</td> <td>う3</td></tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
</body>
</html>



#修正漏れとゴミの部分を修正
#スタイルをちょっと変更
#フィットさせたらスクロールにならなかった

[ メッセージ編集済み 編集者: ほむら 編集日時 2003-11-27 17:44 ]
NM
ベテラン
会議室デビュー日: 2003/08/28
投稿数: 93
投稿日時: 2004-07-24 23:29
済みませんが、便乗です。

過去ログを見ていて同じ様な方法が載っていたので、今、初画面の表示を悩んでいたので投稿しました。

私は次の様にやっていますが、onload直後の表示を先頭からでは無く、最終データが最終行の状態で表示させたいのですが方法が判らず悩んでいます。(スクロールの機能は要ります。)

画面やフレームであればonloadでscrollto等で位置を最終行に強制的に移動してしまえば良いのですが次の方法または投稿の記述にある方法に書き換えたとして何か良い方法は有りませんか?

.CLS008{height:300;overflow-y:scroll;overflow-x:visible}
 (省略)
<DIV align=LEFT>
<TABLE>
<THEAD>
<TR>
 (省略)
</TR>
</THEAD>
</TABLE>
</DIV>
<DIV class=CLS008>
<TABLE ID="stslist">
<TBODY>
 (省略)
</TBODY>
</TABLE>
</DIV>

NM
ベテラン
会議室デビュー日: 2003/08/28
投稿数: 93
投稿日時: 2004-07-26 13:42
結局、フレームを分け、エントリ数×高さ分スクロールバーを進めることにしました。
ほむら
ぬし
会議室デビュー日: 2003/02/28
投稿数: 583
お住まい・勤務地: 東京都
投稿日時: 2004-09-18 20:34
ども、ほむらです。
古いネタでごめんなさい。
もう完全に手遅れですね^^;;;
------------------------------
えと、やり方としてはアンカーを張ってonloadでジャンプするのがよいと思います。
注意することは表示域を制限した<DIV>のなかにジャンプ先を持ってくることです
コード:
<BODY onload="self.location.href='#LAST_DATA'">
<A href="#LAST_DATA">最後のデータへ</A>
<DIV align=LEFT> 
  <TABLE> 
    <THEAD> 
      <TR> 
       (省略) 
      </TR> 
    </THEAD> 
  </TABLE> 
</DIV> 
<DIV class=CLS008> 
  <TABLE ID="stslist"> 
    <TBODY> 
     (省略) 
    </TBODY> 
  </TABLE> 
  <A NAME="LAST_DATA"></A>
</DIV> 

スキルアップ/キャリアアップ(JOB@IT)