`

CSS实现冻结表头(转)

阅读更多
<%@ Language=VBScript %>
<%
xcnt = 50
ycnt = 60
%>
<HTML>
<HEAD>
<META NAME="GENERATOR" Content="Microsoft Visual Studio 6.0">
<style type="text/css">
      .FixedTitleRow
        {
            position: relative; 
            top: expression(this.offsetParent.scrollTop-2); 
            z-index: 10;
            background-color: #E6ECF0;
        }
        
        .FixedTitleColumn
        {
            position: relative; 
            left: expression(this.parentElement.offsetParent.scrollLeft-2);
        }
        
        .FixedDataColumn
        {
            position: relative;
            left: expression(this.parentElement.offsetParent.parentElement.scrollLeft-2);
            background-color: #E6ECF0;
        }

</style>

</HEAD>
<BODY>
<div style="width:800px;height:560px;overflow:scroll;">
	<Table border=1>
		<tr class="FixedTitleRow">
			<th class="FixedTitleColumn">xxxx1</th>
			<th class="FixedTitleColumn">xxxx2</th>
			<th class="FixedTitleColumn">xxxx3</th>
		<%For x = 4 to xcnt%>
			<th class="">th<%=x%></th>
		<%Next%>
		</tr>
	<%For y = 1 to ycnt%>
		<tr>
			<td class="FixedDataColumn">xxxxyyyy</td>
			<td class="FixedDataColumn">xxxxyyyy</td>
			<td class="FixedDataColumn">xxxxyyyy</td>
		<%For x = 4 to xcnt%>
			<td>td<%=x%>,<%=y%></td>
		<%Next%>	
		</tr>
	<%Next%>	
	</table>
</div>
</BODY>
</HTML>

 

分享到:
评论

相关推荐

    css冻结表头冻结第一列

    css样式冻结表头,右侧滚动条滑动,表头锁定不动; css样式冻结首列,下侧滚动条滑动,首列锁定不动; 另外,表中首列添加了复选框,css样式,仅供参考学习,可以根据情况改动 适合菜鸟初学,大神高手会觉得简单绕行

    JS冻结表头和列

    实现JS冻结表头的方法多种多样,可以使用纯JavaScript,也可以借助jQuery或者其他库。一个简单的纯JS实现是通过监听窗口滚动事件,然后动态调整复制的表头的位置。例如: ```javascript window.addEventListener('...

    Css 实现的表头, 表列冻结, 可以超大数据量

    总的来说,这个示例展示了如何使用CSS来创建一个具有冻结表头和列的高性能表格,这对于处理大量数据的网页来说是一种有效的解决方案。通过深入理解CSS布局和适当的性能优化,我们可以为用户提供更友好的交互体验,使...

    asp.net webform冻结列 冻结表头 复杂表头

    总的来说,实现ASP.NET WebForm中的冻结列和冻结表头功能需要结合HTML、CSS和JavaScript技术,理解这些基本原理后,你可以根据项目需求进行调整和优化,以提供最佳的用户体验。在实际项目中,可以参考已有的开源库或...

    jquery 冻结表头的代码。 我试过了,很好用。

    `CloneTableHeader.js`是实现冻结表头功能的JavaScript代码。在这个文件中,开发者会编写逻辑来监听表格的滚动事件,当表格主体部分滚动时,复制的表头将保持在可视区域顶部。通常,这个脚本会先克隆原始的表头,...

    bootstrap冻结表头所需css与js.rar

    本压缩包“bootstrap冻结表头所需css与js.rar”提供了实现这一功能所需的CSS样式文件和JavaScript脚本。 首先,我们来看`bootstrap-table-fixed-header.js`。这个JavaScript文件是专门为Bootstrap表格设计的,它的...

    gridview冻结表头和列

    为了解决这个问题,我们可以实现“gridview冻结表头和列”的功能,确保表头和特定列在滚动时始终保持固定。 GridView 控件是ASP.NET中的一个强大组件,它允许我们以网格形式显示数据源中的数据,并提供了丰富的...

    GridView固定表头和列 实例(GridView冻结表头和列)

    GridView冻结表头和列的需求在大数据量展示时尤为重要,因为表头的可见性有助于用户在浏览过程中始终了解列对应的数据含义。以下将详细介绍如何实现这一功能。 首先,我们需要在页面上添加一个GridView控件,并设置...

    jQuery冻结表头、列

    总结来说,jQuery冻结表头和列是通过创建复制的表头和列,结合滚动事件处理和CSS定位来实现的。理解这一过程可以帮助开发者自定义实现或更好地使用现有的jQuery插件,提升用户体验,特别是在处理大数据表格时。

    gridview冻结表头

    随着现代浏览器对CSS Grid和Flexbox的支持越来越好,也可以利用这些布局技术来实现冻结表头。这种方式需要对CSS有较深入的理解,但可以实现更复杂的布局效果。 在实现gridview冻结表头的过程中,可能需要考虑以下...

    冻结左边表头(HTML)

    具体实现冻结表头的方法有很多种,其中一种常见的方法是使用CSS的`position`属性。以下是一个简单的例子: 1. 首先,我们可以为表头创建一个新的div,例如`&lt;div class="fixed-header"&gt;`,并将表头放入这个div中。 2...

    CSS-固定表头,非常好使

    CSS-固定表头,非常好使,可以在c#,asp,php等环境使用

    jQuery实现冻结表头的方法

    jQuery 提供了一种灵活的方式来实现这一需求,通过扩展 jQuery 对象的方法来创建一个能够冻结表头的插件。以下是一个关于如何使用 jQuery 实现冻结表头的详细说明。 首先,我们了解 jQuery 的 `.CloneTableHeader` ...

    html,JQ,JS行定位结合冻结列表表头

    综上所述,"html,JQ,JS行定位结合冻结列表表头"涉及的技术包括HTML表格布局、jQuery操作DOM与实现搜索定位、JavaScript处理滚动事件和冻结表头、以及跨浏览器兼容性优化。这些都是网页开发中的重要技能,对于提升...

    jQuery冻结表头-嵌套iframe页面

    冻结表头通常通过设置CSS样式和监听滚动事件来实现。当页面滚动时,表头会被固定在屏幕顶部,即使内容区域滚动,表头依然可见。对于嵌套在iframe中的子页面,由于iframe本身具有独立的滚动条,所以需要额外的处理以...

    实现jqGrid三级表头功能,支持冻结,拖动

    在这个项目中,我们将探讨如何实现jqGrid的三级表头功能,并且支持冻结列以及拖动列的功能。 首先,让我们了解什么是三级表头。在标准的表格中,我们通常有单一或双层的表头,而在三级表头中,列标题被分为了三个...

    superTable,html+css+js轻量冻结上左表头,实现上下左右滑动

    对于实现表头的冻结效果,CSS可能需要设置定位(positioning)、溢出(overflow)属性,以及可能的绝对定位(absolute positioning)来确保表头始终可见。例如,可以将表头设置为固定定位(fixed positioning),使...

    复杂表头固定表头和列.html

    复杂表头固定行,固定列,纯css实现,样式可修改,可根据自己要求,更改表头,以及固定列的数量,本人亲测,确实好用

Global site tag (gtag.js) - Google Analytics