`
wing123
  • 浏览: 798905 次
  • 性别: 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  
方法一尚可，方法二不行，表头还是没有固定
发表评论

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

相关推荐

    固定表格的表头，使表体自动生成滚动条

    然而，当表格内容过多时，为了保持页面的清晰性，我们通常会希望表头（Header）固定不动，而表体（Body）部分能滚动显示。这个功能在ASP.NET中可以实现，通过设置CSS样式和HTML结构，我们可以创建一个具有固定表头且...

    固定表头的使用

    在BIRT报表设计中，固定表头的使用是一项关键功能，它能够确保用户在滚动查看长表格时，表头始终保持可见，从而更容易理解和导航数据。本文将详细解释如何实现BIRT固定表头，并探讨其工作原理。 首先，要实现BIRT...

    jquery表头固定

    总结来说，"jquery表头固定"是一个针对网页表格的实用解决方案，通过`freezeheader.js`插件，开发者可以方便地在JSP或其他基于jQuery的项目中实现固定表头功能，提升用户体验。插件的多种效果选择和简单易用的API，...

    JS冻结表头和列

    在JavaScript（JS）中，冻结表头和列是一项常见的需求，特别是在处理大数据表格时，保持表头固定不动以便用户能够更容易地浏览和理解表格内容。本文将深入探讨如何实现这一功能，同时也会提及一些相关工具和源码示例...

    用css样式固定表头和列

    通过以上分析，我们可以看到，利用CSS的定位属性，配合动态计算的`expression`函数，可以有效地实现表格表头和列的固定效果。然而，在实际项目中，考虑到浏览器兼容性和性能优化，建议采用更加现代的技术方案，如CSS...

    HTML,JSP,JQ,JS冻结表单的表头和侧栏

    通过CSS，我们可以设置`position: fixed`属性来固定表头或侧栏的位置，使其在页面滚动时保持不动。 2. **JSP（JavaServer Pages）** JSP是Java的一种动态网页技术，用于在服务器端处理数据并生成HTML。在JSP中，...

    HTML、CSS锁定表头（无漂浮感）

    注意，为了使固定表头与表体之间的滚动效果更自然，你可能需要添加一些额外的CSS来处理表格边框和单元格的宽度。例如，确保表头和表体的单元格宽度一致，以及处理因固定定位导致的空白区域。 此外，`table_Inside_...

    冻结(固定) 行或列 完整例子

    在网页设计中，冻结（固定）行或列是一种常见的需求，尤其在处理大型数据表时，用户滚动查看数据时，需要保持表头或特定列不动，以便于参照。本示例提供两个独立的完整实例，涵盖了如何使用jsp、js和css来实现这一...

    列表第一列不动，后面滚动

    标题 "列表第一列不动，后面滚动" 描述的是一个常见的网页设计需求，特别是在处理大型数据表格时，为了方便用户查看和对比数据，通常会固定表头（第一列）使其在页面滚动时保持可见，而其他列则随着滚动条移动。...

    jQuery实现动态给table赋值的方法示例

    thead用于定义表头，tbody则用于存储实际的数据行。表格的每一行都有三个单元格，分别用于显示昵称、加入时间和签名。 ```html 昵称 加入时间 签名 &lt;td id="id"&gt;&lt;/td&gt; &lt;td id="url"&gt;&lt;/...

    jsp中为表格添加水平滚动条的方法

    在JSP（JavaServer Pages）中，如果使用了Bootstrap框架，可能会遇到一些挑战，因为Bootstrap的自适应布局在某些情况下并不一定能满足我们的需求。本文将详细解释如何在JSP中为表格添加水平滚动条，特别处理...

    可调整列宽TABLE

    在提供的压缩包文件中，`css`文件很可能包含了实现上述功能的CSS样式代码，`jscripts`文件包含了JavaScript函数和事件处理程序，而`jsp`文件可能是服务器端的Java代码，用于生成表格和传递相关配置参数。这些文件...

    润乾报表应用开发教程

    除了基本的报表发布之外，润乾报表还支持多种展示形式，如参数配置、表头固定等功能。 **1.1.2 参数** 报表参数允许用户根据需求动态地更改报表内容，例如日期范围、地区选择等。 **1.1.3 外观控制** 此功能允许...

    java基础知识点67条

    - `&lt;th&gt;`标签用于定义表格中的表头单元格，使得表格结构更加清晰明了。 #### 20. MyBatis简介 - MyBatis是一个持久层框架，它的前身是iBatis，主要用于简化数据库操作。它支持自定义SQL查询语句，提供了动态SQL的...

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