`
thunderbow
  • 浏览: 157325 次
  • 性别: Icon_minigender_1
  • 来自: beijing
社区版块
存档分类
最新评论

DHTML,Table标签,固定行头,固定列头列

单元测试IE浏览器CSS 
阅读更多 
<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常用标签的使用说明，非常详细DHTML常用标签的使用说明，非常...

    DHTML手册 DHTML手册

    此外，`&lt;a&gt;`标签还支持其他属性，如`target`（定义在何处打开链接），`title`（提供链接的额外信息）等，这些属性丰富了链接的功能和用户体验。 在学习DHTML时，理解DOM（Document Object Model）的概念也很关键。...

    标签大全,DHTML

    根据给定的信息，本文将详细介绍DHTML中的各类标签及其用法与示例，这将有助于开发者更好地理解和使用这些标签来创建动态网页。 ### 一、基本结构标签 #### 1. `html` 标签 - **作用**：定义 HTML 文档的根元素。 ...

    DHTML 手册 DHTML 手册

    在DHTML中，CSS可以实现动态效果，如动画、过渡和变形，让元素在页面上以各种方式移动、改变大小或改变颜色，为用户提供视觉上的吸引力。 **JavaScript** JavaScript 是一种脚本语言，它是实现DHTML动态功能的核心...

    Dhtml手册(Dhtml手册.chm)

    本Dhtml手册.chm文件是一个关于DHTML的综合参考资料，对于想要深入了解和学习DHTML的开发者来说，是一份宝贵的资源。 1. **HTML基础**：DHTML建立在HTML的基础上，HTML是超文本标记语言，用于创建网页结构。DHTML...

    DHTML用户界面，使用方便

    标签“dhtml tree grid table”指的是DHTML中常见的组件。DHTML Tree通常用于展示层次结构的数据，如文件系统或组织结构。Tree组件允许用户展开、折叠节点，以及进行选择和拖放操作。DHTML Grid则是一个可编辑的数据...

    一个非常漂亮的基于DHTML+ajax实现的标签导航类库代码

    在标签导航场景中，DHTML可以实现标签的动态显示与隐藏，以及交互效果如滑动、淡入淡出等，提升用户体验。 AJAX 是一种创建动态网页的技术，通过在后台与服务器进行少量数据交换，使网页实现异步更新。在标签导航中...

    DHTML中文参考手册

    一套完整的DHTML中文文档的说明,内容包含所有的DHTML标签和各种常用的方法！

    css3 DHTML Ext.3. html5 JavaWeb标签 Spring2.5

    css3.0参考手册DHTML手册Ext.3.0.中文html5参考手册JavaScript使用手册JavaWeb标签大全JPA注解参考_JavaWeb标签.1.4.1.参考文档jQuery1.4.2_API帮助文档简体中文版Spring2.5-中文参考手册

    Dhtml帮助文档 (Dhtml帮助文档)

    DHTML的关键组成部分包括： 1. **HTML（HyperText Markup Language）**：是网页的基础结构语言，用于定义网页内容和布局。在DHTML中，HTML标记通常包含一些特殊的属性，这些属性可以被JavaScript脚本动态修改。 2....

    dhtml参考手册 chm版本

    DHTML 对象 DHTML 属性 DHTML 方法 DHTML 事件 DHTML 集合 HTML 参考 HTML 元素 HTML 字符集 样式表(CSS)参考 CSS 属性参考 CSS 长度单位参考 其他参考 命令标识符 缺省行为参考 htc 行为参考 可视化...

    DHTML 手册

    **DHTML手册** DHTML（Dynamic HTML）是一种用于创建交互式和动态网页的技术，它结合了HTML、CSS、JavaScript以及DOM（Document Object Model）来实现页面的动态效果和交互性。DHTML允许开发者在不刷新整个页面的...

    dhtml.net 1.1版

    《深入理解DHTML.net 1.1版：网页抓取与JavaScript语法解析的利器》 在互联网技术日新月异的今天，数据抓取和分析已成为企业和个人获取网络信息的重要手段。DHTML.net 1.1版正是这样一个针对网页抓取和JavaScript...

    DHTML手册 DHTML

    **DHTML（Dynamic HTML）**是一种用于创建交互式和动态网页的技术，它结合了HTML、CSS、JavaScript以及DOM（文档对象模型）等技术，使得网页不仅具有静态展示内容的能力，还能实现动态效果和用户交互。 **HTML...

    最新收集的实用 DHtml 代码例子

    6. **CSS3新特性**：CSS3引入了许多新特性，如多列布局、阴影效果、边框半径、渐变和滤镜等，大大丰富了DHtml的表现力。同时，CSS3的伪类和伪元素如`:hover`、`:active`、`:before`和`:after`，可以实现更复杂的交互...

    DHTML 手册中文文档

    DHTML 完全手册 动态 HTML (DHTML) 对象模型参考 &lt;br&gt;DHTML 对象 DHTML 属性 DHTML 方法 DHTML 事件 DHTML 集合 HTML 参考 &lt;br&gt;HTML 元素 HTML 字符集 样式表(CSS)参考 &lt;br...

Magicbox
Global site tag (gtag.js) - Google Analytics