`
wing123
  • 浏览: 789331 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

jsp表格的表头固定不动

    博客分类：
  • JSP
JSPCSSHTML 
阅读更多

方法一：

 

<table width=400 border=1 bgcolor=yellow>
<tr><td height=30>
<table width=100% border=1>
<tr><td width=24% align=center>表头1</td>
<td width=24% align=center>表头2</td>
<td width=24% align=center>表头3</td>
<td width=24% align=center>表头4</td>
<td align=center>↓</td>
</tr></table>
</td></tr>
<tr><td height=200 bgcolor=#ffffff>
<div style="width:100%;height:100%;overflow-x:hidden;overflow-y:scroll">
<table width=100% height=300 border=1>
<tr><td width=25% align=center>内容1</td>
<td width=25% align=center>内容2</td>
<td width=25% align=center>内容3</td>
<td width=25% align=center>内容4</td>
</tr>
<tr><td width=25% align=center>内容1</td>
<td width=25% align=center>内容2</td>
<td width=25% align=center>内容3</td>
<td width=25% align=center>内容4</td>
</tr>
<tr><td width=25% align=center>内容1</td>
<td width=25% align=center>内容2</td>
<td width=25% align=center>内容3</td>
<td width=25% align=center>内容4</td>
</tr>

</table>

</div>
</td></tr></table>

 

 

注： 这样做如果表中列过长的时候需强制换行。

 

方法二：

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>固定表头</title>
</head>

<style type="text/css">
.fixedtd{
    color:#FF0000;
    position:relative;
 top: expression(this.parentElement.parentElement.parentElement.scrollTop)
 z-index:1;
}
</style>
<body>
<div style="overflow:auto; height:100px;">
  <table width="667" cellpadding="0" cellspacing="0" border="1">
    <tr bgcolor="#999999">
      <td class="fixedtd" width="86">表头</td>
      <td class="fixedtd" width="120">表头</td>
      <td class="fixedtd" width="439">表头</td>
    </tr>
    <tr>
      <td>内容1</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>内容2</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>内容3</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>内容4</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>内容5</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>内容6</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
  </table>
</div>
</body>
</html>

 

 

分享到：
| Hibernate中Criteria的完整用法
评论
4 楼 huanzei 2015-09-18  
还可以了，po主的第一个方法可行，第二个方法没有试
3 楼 javams 2015-01-19  
Soongtracy 写道
方法二完全不行啊亲，你自己有木有试过啊

这些都是经过实践贴出来的代码，你们那里为什么不行，我就不清楚了。
2 楼 Soongtracy 2014-01-09  
方法二完全不行啊亲，你自己有木有试过啊
1 楼 javams 2013-08-08  
方法一尚可，方法二不行，表头还是没有固定
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics