`

固定表头的例子

    博客分类:
  • CSS
 
阅读更多

 

 

 

</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"  >&nbsp;</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和Firfox的HTML固定表头例子

    标题中的“一个兼容IE、Chrome和Firefox的HTML固定表头例子”表明这是一个关于网页开发的示例,重点在于实现表格的表头在滚动时保持固定显示,以提供更好的用户阅读体验。这种技术通常用于大数据量的表格,使用户在...

    gridview固定表头的一个实例

    GridView固定表头的一个实例 在实际开发中,我们经常会遇到GridView固定表头的问题,特别是在横向滚动和纵向固定时。以下是一个实例,解决了GridView固定表头的问题,包括横向滚动和纵向固定。 title:GridView...

    html table 固定表头和列

    固定表头通常通过CSS实现。一种常见的方法是将表头部分独立出来,然后设置CSS样式使其相对于窗口或容器固定。以下是一个示例: ```html table { width: 100%; overflow-y: auto; } thead { position: sticky...

    移动web table固定表头第一列.rar

    "移动web table固定表头第一列.rar"这个压缩包文件显然是为了解决这些问题,提供了一种在移动端实现固定表头和第一列的解决方案。下面将详细讲解如何在HTML5和CSS3环境下实现这样的功能。 首先,我们需要创建一个...

    DataGrid固定表头

    在大数据量的情况下,用户需要滚动查看数据,但保持表头固定以便于理解每一列的数据含义,这就需要用到"DataGrid固定表头"的功能。这种功能在前端开发中尤其重要,因为它提供了更好的用户体验,使得用户在滚动浏览长...

    GridView或DataGrid 固定表头,滚动数据的例子学习心得

    标题中的"GridView或DataGrid 固定表头,滚动数据的例子学习心得"指的是一种技术技巧,用于解决上述问题。主要方法是通过CSS样式和JavaScript来实现。首先,利用`table-layout:fixed`属性,可以固定表格布局,使得...

    asp网页表头固定解决

    - **响应式设计**:确保在不同屏幕尺寸和设备上,固定表头依然有效且布局合理。 - **性能优化**:处理大数据量时,避免因JavaScript操作影响页面加载速度。 - **兼容性测试**:在多种浏览器和设备上进行测试,确保...

    html 表头固定及列固定

    例如,对于移动设备,可能只固定表头而不固定列;对于大屏幕,可以同时固定表头和一列或多列。可以通过媒体查询(Media Queries)实现响应式设计,或者提供用户切换不同固定模式的选项。 总的来说,实现“html 表头...

    div+css固定表头的

    标题"div+css固定表头的"指的是如何利用这种技术在长表格中使表头在滚动时始终保持可见。这种效果在大数据量的表格中非常有用,因为它允许用户在浏览数据时始终能看到列标题,从而更好地理解表格内容。 固定表头的...

    CSS 固定表头和列

    在处理大型数据表格时,为了提高用户体验,我们常常需要实现固定表头和列的效果,这样用户在滚动页面时,表头和列标签始终保持可见,方便用户定位数据。本教程将详细介绍如何使用CSS实现这一功能。 首先,我们需要...

    gridview固定表头的一个具体实例----横向滚动 纵向滚动

    ### GridView固定表头实现——横向滚动与纵向固定 在网页应用开发中,特别是涉及到大量数据展示的情况下,如何优雅地处理表格中的数据展示成为一个重要的技术挑战。本文将通过一个具体的实例来探讨如何实现在使用...

    html表头固定

    // 计算固定表头的位置,使其与滚动后的实际表头对齐 fixedTheadContainer.style.top = scrollTop + 'px'; } else { // 否则,隐藏固定表头 fixedTheadContainer.style.display = 'none'; } }; ``` 在这个...

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

    要固定表头,我们可以通过CSS的`position`属性来实现。将`&lt;thead&gt;`元素的`position`设置为`fixed`,并设置适当的`top`和`width`属性,使其始终位于屏幕顶部,并占据应有的宽度。同时,为了防止表头遮挡表体,需要给...

    一个table表头固定,内容可滚动的实用例子

    一个table表头固定,内容可滚动的实用例子,同时可以实现增加,删除功能

    表头固定,页面下拉的几个小例子.rar

    5. Flexbox或Grid布局:随着现代浏览器对Flexbox和Grid布局的支持,也可以利用这些新的布局模式来实现固定表头。 通过分析这些HTML文件,我们可以学习到如何在实际项目中应用这些方法,以及在不同场景下选择合适的...

    表头固定内容滚动,直接打开html即可运行

    "表头固定滚动下拉"可能是其中的一个文件名,暗示了这个例子可能包含下拉菜单或者多级表头的滚动效果。 在实现表头固定的过程中,开发者可能会遇到一些技术挑战,例如: 1. **兼容性问题**:不同的浏览器对CSS和...

    css固定表头

    在网页设计中,"CSS固定表头"是一个常见的需求,特别是在处理大数据表格时,它能让用户在滚动查看数据时始终保持表头位置不变,方便对比和理解。本篇将深入探讨如何利用CSS实现这一功能。 首先,我们需要理解CSS中...

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

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

    网页模板——jQuery实现固定表头标题栏让表格数据在滚动栏里滚动.zip

    网页模板设计中,为了提供更好的用户体验,特别是在处理大数据量的表格时,经常需要实现固定表头的功能。"jQuery实现固定表头标题栏让表格数据在滚动栏里滚动"这一技术主题,就是解决这个问题的一种常见方法。jQuery...

    Ext3.4.0复杂(多行)表头+锁定多列例子

    "Ext3.4.0复杂(多行)表头+锁定多列例子"这个标题涉及到的是一个JavaScript库——Ext JS的一个高级功能应用。Ext JS是一个流行的前端框架,用于构建富互联网应用程序(RIA),它提供了一套完整的组件化开发工具,包括...

Global site tag (gtag.js) - Google Analytics