- PR -

GridViewのヘッダー/フッターを固定したい

1
投稿者投稿内容
まなか
常連さん
会議室デビュー日: 2008/04/17
投稿数: 37
投稿日時: 2009-01-16 11:20
↓を参考にヘッダーの固定をしました。
http://blogs.yahoo.co.jp/ogiwara_hsk/32105274.html

同様に、フッターも固定したいと思い、
.FreezingFooter
{
position: relative;
top:expression(this.offsetParent.scrollBottom);
z-index: 10;
}

というようにしてみましたが、反応なしです。
試しにヘッダーの固定を外してみましたが、フッターは固定されません。
フッターの固定はできるのでしょうか？
まるく
大ベテラン
会議室デビュー日: 2004/01/09
投稿数: 181
投稿日時: 2009-01-16 15:13
試しにやってみた。こんなのでどうですやろ？
Footer 行を２行用意しないといけないのがなんとも苦しい。。。orz

コード:
<HTML>
<HEAD>
<style type="text/css">
.FixedCol
{
  background-color:Pink;
  border-width:1px;
  border-color:Black;
  border-style:Solid;
  height:20px;
}
.Col
{
  text-align:center;
  border-width:1px;
  border-color:Black;
  border-style:Solid;
  height:20px;
}
.FreezingHeader
{
  position:relative;
  top:expression(this.offsetParent.scrollTop);
  z-index:10;
}
.FreezingFooter
{
  position:absolute;
  top:expression(this.offsetParent.scrollTop + this.offsetParent.offsetHeight - this.offsetHeight);
  z-index:10;
}

</style>
</HEAD>
<BODY>
<div id="divFrame" style="overflow:auto; position:relative; width:50px; height:120px;">
<table cellspacing="0" cellpadding="0">
<tr class="FreezingHeader"><th class="FixedCol">あ</th></tr>
<tr><td class="Col">い</td></tr>
<tr><td class="Col">う</td></tr>
<tr><td class="Col">え</td></tr>
<tr><td class="Col">お</td></tr>
<tr><td class="Col">か</td></tr>
<tr><td class="Col">き</td></tr>
<tr><td class="Col">く</td></tr>
<tr><td class="Col">け</td></tr>
<tr><td class="Col">こ</td></tr>
<tr class="FreezingFooter"><td class="FixedCol">こ</td></tr>
</table>
</div>
</BODY>
</HTML>





引用:

まなかさんの書き込み (2009-01-16 11:20) より:
↓を参考にヘッダーの固定をしました。
http://blogs.yahoo.co.jp/ogiwara_hsk/32105274.html

同様に、フッターも固定したいと思い、
.FreezingFooter
{
position: relative;
top:expression(this.offsetParent.scrollBottom);
z-index: 10;
}

というようにしてみましたが、反応なしです。
試しにヘッダーの固定を外してみましたが、フッターは固定されません。
フッターの固定はできるのでしょうか？

まなか
常連さん
会議室デビュー日: 2008/04/17
投稿数: 37
投稿日時: 2009-01-16 15:44
まるくさん、ありがとうございます！！

↓でできました！！

コード:
.FreezingFooter
{
  position:absolute;
  top:expression(this.offsetParent.scrollTop + this.offsetParent.offsetHeight - this.offsetHeight);
  z-index:10;
}
1

スキルアップ／キャリアアップ（JOB@IT）