<html>
<head>
<style type="text/css">
<!--
body,table, td, a {
font:9pt;
}
/*重点:固定行头样式*/
.scrollRowThead {
position: relative;
left: ;
z-index:0;
}
/*重点:固定表头样式*/
.scrollColThead {
position: relative;
top: ;
z-index:2;
}
/*行列交叉的地方*/
.scrollCR {
z-index:3;
}
/*div外框*/
.scrollDiv {
height:200px;
clear: both;
border: 1px solid #EEEEEE;
overflow: scroll;
width: 100%;
}
/*行头居中*/
.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>
<script></script>
</head>
<body >
本演示子兼容ie 浏览器,测试日期2006 年,其他浏览器在div onscroll 事件用js实现和本列相同的样式应该也可实现
<div id="scrollDiv" class="scrollDiv" >
<table border="0" cellpadding="3" cellspacing="0" width="100%" class="scrollTable">
<tr class="scrollColThead" >
<th class="scrollRowThead scrollCR" > </th>
<th colspan="2">列头</th>
<th colspan="10">列头</th>
</tr>
<tr class="scrollColThead" >
<th class="scrollRowThead scrollCR" >h1</th>
<th >h2</th>
<th >h3</th>
<th >h4</th>
<th >h5</th>
<th >565656</th>
<th >565656</th>
<th >5656565656</th>
<th >56565656</th>
<th >56565656</th>
<th >56565656</th>
<th >56565656</th>
<th >56566666666666666666666666666666666666666666666666666666666666666666565656</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>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td class="scrollRowThead" ><input type="checkbox" name="checkbox2" value="checkbox"> a</td>
<td>单元格2</td>
<td>单元格3</td>
<td>单元格4</td>
<td>单元格5</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td class="scrollRowThead" ><input type="checkbox" name="checkbox3" value="checkbox"> a</td>
<td>单元格2</td>
<td>单元格3</td>
<td>单元格4</td>
<td>单元格5</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td class="scrollRowThead" ><input type="checkbox" name="checkbox4" value="checkbox"> a</td>
<td>单元格2</td>
<td>单元格3</td>
<td>单元格4</td>
<td>单元格5</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td class="scrollRowThead" ><input type="checkbox" name="checkbox5" value="checkbox"> a</td>
<td>单元格2</td>
<td>单元格3</td>
<td>单元格4</td>
<td>单元格5</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td class="scrollRowThead" ><input type="checkbox" name="checkbox6" value="checkbox"> a</td>
<td>单元格2</td>
<td>单元格3</td>
<td>单元格4</td>
<td>单元格5</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td class="scrollRowThead" ><input type="checkbox" name="checkbox7" value="checkbox"> a</td>
<td>单元格2</td>
<td>单元格3</td>
<td>单元格4</td>
<td>单元格5</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</div>
</body>
</html>
分享到:
相关推荐
DHTML常用标签的使用说明,非常详细。DHTML常用标签的使用说明,非常详细。DHTML常用标签的使用说明,非常详细。DHTML常用标签的使用说明,非常详细DHTML常用标签的使用说明,非常详细DHTML常用标签的使用说明,非常...
此外,`<a>`标签还支持其他属性,如`target`(定义在何处打开链接),`title`(提供链接的额外信息)等,这些属性丰富了链接的功能和用户体验。 在学习DHTML时,理解DOM(Document Object Model)的概念也很关键。...
根据给定的信息,本文将详细介绍DHTML中的各类标签及其用法与示例,这将有助于开发者更好地理解和使用这些标签来创建动态网页。 ### 一、基本结构标签 #### 1. `html` 标签 - **作用**:定义 HTML 文档的根元素。 ...
在DHTML中,CSS可以实现动态效果,如动画、过渡和变形,让元素在页面上以各种方式移动、改变大小或改变颜色,为用户提供视觉上的吸引力。 **JavaScript** JavaScript 是一种脚本语言,它是实现DHTML动态功能的核心...
本Dhtml手册.chm文件是一个关于DHTML的综合参考资料,对于想要深入了解和学习DHTML的开发者来说,是一份宝贵的资源。 1. **HTML基础**:DHTML建立在HTML的基础上,HTML是超文本标记语言,用于创建网页结构。DHTML...
标签“dhtml tree grid table”指的是DHTML中常见的组件。DHTML Tree通常用于展示层次结构的数据,如文件系统或组织结构。Tree组件允许用户展开、折叠节点,以及进行选择和拖放操作。DHTML Grid则是一个可编辑的数据...
在标签导航场景中,DHTML可以实现标签的动态显示与隐藏,以及交互效果如滑动、淡入淡出等,提升用户体验。 AJAX 是一种创建动态网页的技术,通过在后台与服务器进行少量数据交换,使网页实现异步更新。在标签导航中...
一套完整的DHTML中文文档的说明,内容包含所有的DHTML标签和各种常用的方法!
css3.0参考手册DHTML手册Ext.3.0.中文html5参考手册JavaScript使用手册JavaWeb标签大全JPA注解参考_JavaWeb标签.1.4.1.参考文档jQuery1.4.2_API帮助文档简体中文版Spring2.5-中文参考手册
DHTML的关键组成部分包括: 1. **HTML(HyperText Markup Language)**:是网页的基础结构语言,用于定义网页内容和布局。在DHTML中,HTML标记通常包含一些特殊的属性,这些属性可以被JavaScript脚本动态修改。 2....
DHTML 对象 DHTML 属性 DHTML 方法 DHTML 事件 DHTML 集合 HTML 参考 HTML 元素 HTML 字符集 样式表(CSS)参考 CSS 属性参考 CSS 长度单位参考 其他参考 命令标识符 缺省行为参考 htc 行为参考 可视化...
**DHTML手册** DHTML(Dynamic HTML)是一种用于创建交互式和动态网页的技术,它结合了HTML、CSS、JavaScript以及DOM(Document Object Model)来实现页面的动态效果和交互性。DHTML允许开发者在不刷新整个页面的...
《深入理解DHTML.net 1.1版:网页抓取与JavaScript语法解析的利器》 在互联网技术日新月异的今天,数据抓取和分析已成为企业和个人获取网络信息的重要手段。DHTML.net 1.1版正是这样一个针对网页抓取和JavaScript...
**DHTML(Dynamic HTML)**是一种用于创建交互式和动态网页的技术,它结合了HTML、CSS、JavaScript以及DOM(文档对象模型)等技术,使得网页不仅具有静态展示内容的能力,还能实现动态效果和用户交互。 **HTML...
6. **CSS3新特性**:CSS3引入了许多新特性,如多列布局、阴影效果、边框半径、渐变和滤镜等,大大丰富了DHtml的表现力。同时,CSS3的伪类和伪元素如`:hover`、`:active`、`:before`和`:after`,可以实现更复杂的交互...
DHTML 完全手册 动态 HTML (DHTML) 对象模型参考 <br>DHTML 对象 DHTML 属性 DHTML 方法 DHTML 事件 DHTML 集合 HTML 参考 <br>HTML 元素 HTML 字符集 样式表(CSS)参考 <br...