方法一：
<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> </td>
<td> </td>
</tr>
<tr>
<td>内容2</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>内容3</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>内容4</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>内容5</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>内容6</td>
<td> </td>
<td> </td>
</tr>
</table>
</div>
</body>
</html>
分享到：
相关推荐
以上就是纯CSS实现表头固定表格滚动条效果的基本步骤。通过这种方式，你可以轻松地将这个功能集成到JSP、ASP、PHP或其他服务器端框架中，为用户提供更好的数据浏览体验。记得根据实际项目需求进行适当的定制和优化。
然而，当表格内容过多时，为了保持页面的清晰性，我们通常会希望表头（Header）固定不动，而表体（Body）部分能滚动显示。这个功能在ASP.NET中可以实现，通过设置CSS样式和HTML结构，我们可以创建一个具有固定表头且...
在BIRT报表设计中，固定表头的使用是一项关键功能，它能够确保用户在滚动查看长表格时，表头始终保持可见，从而更容易理解和导航数据。本文将详细解释如何实现BIRT固定表头，并探讨其工作原理。 首先，要实现BIRT...
总结来说，"jquery表头固定"是一个针对网页表格的实用解决方案，通过`freezeheader.js`插件，开发者可以方便地在JSP或其他基于jQuery的项目中实现固定表头功能，提升用户体验。插件的多种效果选择和简单易用的API，...
在JavaScript（JS）中，冻结表头和列是一项常见的需求，特别是在处理大数据表格时，保持表头固定不动以便用户能够更容易地浏览和理解表格内容。本文将深入探讨如何实现这一功能，同时也会提及一些相关工具和源码示例...
通过以上分析，我们可以看到，利用CSS的定位属性，配合动态计算的`expression`函数，可以有效地实现表格表头和列的固定效果。然而，在实际项目中，考虑到浏览器兼容性和性能优化，建议采用更加现代的技术方案，如CSS...
通过CSS，我们可以设置`position: fixed`属性来固定表头或侧栏的位置，使其在页面滚动时保持不动。 2. **JSP（JavaServer Pages）** JSP是Java的一种动态网页技术，用于在服务器端处理数据并生成HTML。在JSP中，...
注意，为了使固定表头与表体之间的滚动效果更自然，你可能需要添加一些额外的CSS来处理表格边框和单元格的宽度。例如，确保表头和表体的单元格宽度一致，以及处理因固定定位导致的空白区域。 此外，`table_Inside_...
在网页设计中，冻结（固定）行或列是一种常见的需求，尤其在处理大型数据表时，用户滚动查看数据时，需要保持表头或特定列不动，以便于参照。本示例提供两个独立的完整实例，涵盖了如何使用jsp、js和css来实现这一...
标题 "列表第一列不动，后面滚动" 描述的是一个常见的网页设计需求，特别是在处理大型数据表格时，为了方便用户查看和对比数据，通常会固定表头（第一列）使其在页面滚动时保持可见，而其他列则随着滚动条移动。...
thead用于定义表头，tbody则用于存储实际的数据行。表格的每一行都有三个单元格，分别用于显示昵称、加入时间和签名。 ```html 昵称 加入时间 签名 <td id="id"></td> <td id="url"></...
在JSP（JavaServer Pages）中，如果使用了Bootstrap框架，可能会遇到一些挑战，因为Bootstrap的自适应布局在某些情况下并不一定能满足我们的需求。本文将详细解释如何在JSP中为表格添加水平滚动条，特别处理...
在提供的压缩包文件中，`css`文件很可能包含了实现上述功能的CSS样式代码，`jscripts`文件包含了JavaScript函数和事件处理程序，而`jsp`文件可能是服务器端的Java代码，用于生成表格和传递相关配置参数。这些文件...
除了基本的报表发布之外，润乾报表还支持多种展示形式，如参数配置、表头固定等功能。 **1.1.2 参数** 报表参数允许用户根据需求动态地更改报表内容，例如日期范围、地区选择等。 **1.1.3 外观控制** 此功能允许...
- `<th>`标签用于定义表格中的表头单元格，使得表格结构更加清晰明了。 #### 20. MyBatis简介 - MyBatis是一个持久层框架，它的前身是iBatis，主要用于简化数据库操作。它支持自定义SQL查询语句，提供了动态SQL的...