</html>
<style type="text/css">
<!--
body,table, td, a {font:9pt;}
/*重点:固定行头样式*/
.scrollRowThead{position: relative;
left: expression(this.parentElement.parentElement
.parentElement.parentElement.scrollLeft);
z-index:0;}
/*重点:固定表头样式*/
.scrollColThead {position: relative;
top: expression(this.parentElement.parentElement
.parentElement.scrollTop);
z-index:2;}
/*行列交叉的地方*/
.scrollCR { z-index:3;}
/*div外框*/
.scrollDiv {height:200px;clear: both;
border: 1px solid #EEEEEE;
OVERFLOW: scroll;width: 120px; }
/*行头居中*/
.scrollColThead td,.scrollColThead th
{ text-align: center ;}
/*行头列头背景*/
.scrollRowThead,.scrollColThead td,.scrollColThead th
{background-color:EEEEEE;}
/*表格的线*/
.scrolltable{
border-bottom:1px solid #CCCCCC;
border-right:1px solid #CCCCCC; }
/*单元格的线等*/
.scrolltable td,.scrollTable th{
border-left: 1px solid #CCCCCC;
border-top: 1px solid #CCCCCC;
padding: 5px; }
-->
</style>
<h1>利用CSS代码让Table产生固定表头</h1>
<h3>www.865171.cn</h3>
<div id="scrollDiv" class="scrollDiv" >
<table border="0" cellpadding="3" cellspacing="0" width="300" class="scrollTable">
<tr class="scrollColThead" >
<th class="scrollRowThead scrollCR" > </th>
<th colspan="2">列头</th>
<th colspan="2">列头</th>
</tr>
<tr class="scrollColThead" >
<th class="scrollRowThead scrollCR" >h1</th>
<th >h2</th>
<th >h3</th>
<th >h4</th>
<th >h5</th>
</tr>
<tr>
<td class="scrollRowThead" >
<input type="checkbox" name="checkbox" value="checkbox">
a</td>
<td>单元格2</td>
<td>单元格3</td>
<td>单元格4</td>
<td>单元格5</td>
</tr>
<tr>
<td class="scrollRowThead" >
<input type="checkbox" name="checkbox2" value="checkbox">
b</td>
<td>单元格2</td>
<td>单元格3</td>
<td>单元格4</td>
<td>单元格5</td>
</tr>
<tr>
<td nowrap class="scrollRowThead" >
<input type="checkbox" name="checkbox3" value="checkbox">
c</td>
<td nowrap>单元格2</td>
<td nowrap>单元格3</td>
<td nowrap>单元格4</td>
<td nowrap>单元格5</td>
</tr>
<tr>
<td class="scrollRowThead" >
<input type="checkbox" name="checkbox4" value="checkbox">
d</td>
<td>单元格2</td>
<td>单元格3</td>
<td>单元格4</td>
<td>单元格5</td>
</tr>
<tr>
<td class="scrollRowThead" >
<input type="checkbox" name="checkbox5" value="checkbox">
e</td>
<td>单元格2</td>
<td>单元格3</td>
<td>单元格4</td>
<td>单元格5</td>
</tr>
<tr>
<td class="scrollRowThead" >
<input type="checkbox" name="checkbox6" value="checkbox">
f</td>
<td>单元格2</td>
<td>单元格3</td>
<td>单元格4</td>
<td>单元格5</td>
</tr>
<tr>
<td class="scrollRowThead" >
<input type="checkbox" name="checkbox7" value="checkbox">
g</td>
<td>单元格2</td>
<td>单元格3</td>
<td>单元格4</td>
<td>单元格5</td>
</tr>
</table>
</div>
</html>
分享到:
相关推荐
标题中的“一个兼容IE、Chrome和Firefox的HTML固定表头例子”表明这是一个关于网页开发的示例,重点在于实现表格的表头在滚动时保持固定显示,以提供更好的用户阅读体验。这种技术通常用于大数据量的表格,使用户在...
GridView固定表头的一个实例 在实际开发中,我们经常会遇到GridView固定表头的问题,特别是在横向滚动和纵向固定时。以下是一个实例,解决了GridView固定表头的问题,包括横向滚动和纵向固定。 title:GridView...
固定表头通常通过CSS实现。一种常见的方法是将表头部分独立出来,然后设置CSS样式使其相对于窗口或容器固定。以下是一个示例: ```html table { width: 100%; overflow-y: auto; } thead { position: sticky...
"移动web table固定表头第一列.rar"这个压缩包文件显然是为了解决这些问题,提供了一种在移动端实现固定表头和第一列的解决方案。下面将详细讲解如何在HTML5和CSS3环境下实现这样的功能。 首先,我们需要创建一个...
在大数据量的情况下,用户需要滚动查看数据,但保持表头固定以便于理解每一列的数据含义,这就需要用到"DataGrid固定表头"的功能。这种功能在前端开发中尤其重要,因为它提供了更好的用户体验,使得用户在滚动浏览长...
标题中的"GridView或DataGrid 固定表头,滚动数据的例子学习心得"指的是一种技术技巧,用于解决上述问题。主要方法是通过CSS样式和JavaScript来实现。首先,利用`table-layout:fixed`属性,可以固定表格布局,使得...
- **响应式设计**:确保在不同屏幕尺寸和设备上,固定表头依然有效且布局合理。 - **性能优化**:处理大数据量时,避免因JavaScript操作影响页面加载速度。 - **兼容性测试**:在多种浏览器和设备上进行测试,确保...
例如,对于移动设备,可能只固定表头而不固定列;对于大屏幕,可以同时固定表头和一列或多列。可以通过媒体查询(Media Queries)实现响应式设计,或者提供用户切换不同固定模式的选项。 总的来说,实现“html 表头...
标题"div+css固定表头的"指的是如何利用这种技术在长表格中使表头在滚动时始终保持可见。这种效果在大数据量的表格中非常有用,因为它允许用户在浏览数据时始终能看到列标题,从而更好地理解表格内容。 固定表头的...
在处理大型数据表格时,为了提高用户体验,我们常常需要实现固定表头和列的效果,这样用户在滚动页面时,表头和列标签始终保持可见,方便用户定位数据。本教程将详细介绍如何使用CSS实现这一功能。 首先,我们需要...
### GridView固定表头实现——横向滚动与纵向固定 在网页应用开发中,特别是涉及到大量数据展示的情况下,如何优雅地处理表格中的数据展示成为一个重要的技术挑战。本文将通过一个具体的实例来探讨如何实现在使用...
// 计算固定表头的位置,使其与滚动后的实际表头对齐 fixedTheadContainer.style.top = scrollTop + 'px'; } else { // 否则,隐藏固定表头 fixedTheadContainer.style.display = 'none'; } }; ``` 在这个...
要固定表头,我们可以通过CSS的`position`属性来实现。将`<thead>`元素的`position`设置为`fixed`,并设置适当的`top`和`width`属性,使其始终位于屏幕顶部,并占据应有的宽度。同时,为了防止表头遮挡表体,需要给...
一个table表头固定,内容可滚动的实用例子,同时可以实现增加,删除功能
5. Flexbox或Grid布局:随着现代浏览器对Flexbox和Grid布局的支持,也可以利用这些新的布局模式来实现固定表头。 通过分析这些HTML文件,我们可以学习到如何在实际项目中应用这些方法,以及在不同场景下选择合适的...
"表头固定滚动下拉"可能是其中的一个文件名,暗示了这个例子可能包含下拉菜单或者多级表头的滚动效果。 在实现表头固定的过程中,开发者可能会遇到一些技术挑战,例如: 1. **兼容性问题**:不同的浏览器对CSS和...
在网页设计中,"CSS固定表头"是一个常见的需求,特别是在处理大数据表格时,它能让用户在滚动查看数据时始终保持表头位置不变,方便对比和理解。本篇将深入探讨如何利用CSS实现这一功能。 首先,我们需要理解CSS中...
在网页设计中,冻结(固定)行或列是一种常见的需求,尤其在处理大型数据表时,用户滚动查看数据时,需要保持表头或特定列不动,以便于参照。本示例提供两个独立的完整实例,涵盖了如何使用jsp、js和css来实现这一...
网页模板设计中,为了提供更好的用户体验,特别是在处理大数据量的表格时,经常需要实现固定表头的功能。"jQuery实现固定表头标题栏让表格数据在滚动栏里滚动"这一技术主题,就是解决这个问题的一种常见方法。jQuery...
"Ext3.4.0复杂(多行)表头+锁定多列例子"这个标题涉及到的是一个JavaScript库——Ext JS的一个高级功能应用。Ext JS是一个流行的前端框架,用于构建富互联网应用程序(RIA),它提供了一套完整的组件化开发工具,包括...