当前位置：首页 > 技术问答集
firefox

♣

高分求教“div层上下滚动显示table内容的问题？”

 所属目录：Java   |   类型：技术问答   |   时间：2007-05-21
 问题：

我的页面中有个table行数比较多，我将这个table包含在  
  <div   style="overflow-y:scroll;height:110px;">内，实现上下滚动显示。但这样做向下滚动时  
  table的第一行标题也滚动没了，如果将标题单独放到一个table，内容放到另一个table中，虽然  
  可以解决上面问题，但两个table的各列之间很难完全对齐。请问各位高手有什么好办法能实现一  
  个table中的标题行固定，而下面内容可上下滚动的功能？多谢

· 网友精彩回答：

发表者：jk_10000

http://jkisjk.vip.sina.com/html/fixheadtr2.htm

发表者：singlepine

<html>  
  <head>  
  <title></title>  
  <meta   http-equiv="content-type"   content="text/html;   charset=gb2312">  
  <style>   .fixedheadertr   {   position:relative;   top:expression(this.offsetparent.scroll);   }  
  ;   .maindiv   {   overflow:auto;   scrollbar-face-color:9999ff;   height:expression((document.body.clientheight-this.offset-20>this.children[0].offsetheight)?(this.children[0].offsetheight+20)   :   (document.body.clientheight-this.offset-20));   width:expression(document.body.clientwidth-20);   }  
  </style>  
  </head>  
  <body>  
  <br>  
  <div   class="maindiv">  
  <table   width="100%"   border="1"   cellspacing="0"   style="margin-top:-2px">  
  <tr   class="fixedheadertr"   style="background:navy;color:white">  
  <td   nowrap>header   a</td>  
  <td   nowrap>header   b</td>  
  <td   nowrap>header   c</td>  
  </tr>  
  <tr>  
  <td>a</td>  
  <td>b</td>  
  <td>c</td>  
  </tr>  
  <tr>  
  <td>a</td>  
  <td>b</td>  
  <td>c</td>  
  </tr>  
  <tr>  
  <td>a</td>  
  <td>b</td>  
  <td>c</td>  
  </tr>  
  <tr>  
  <td>a</td>  
  <td>b</td>  
  <td>c</td>  
  </tr>  
  <tr>  
  <td>a</td>  
  <td>b</td>  
  <td>c</td>  
  </tr>  
  <tr>  
  <td>a</td>  
  <td>b</td>  
  <td>c</td>  
  </tr>  
  <tr>  
  <td>a</td>  
  <td>b</td>  
  <td>c</td>  
  </tr>  
  <tr>  
  <td>a</td>  
  <td>b</td>  
  <td>c</td>  
  </tr>  
  <tr>  
  <td>a</td>  
  <td>b</td>  
  <td>c</td>  
  </tr>  
  </table>  
  </div>  
  </body>  
  </html>

.
© 2006-2008 All Rights Reserved