易截截图软件、单文件、免安装、纯绿色、仅160KB

基于IE与css的表格行头与多层列头锁定方法

  基于IE与css的表格行头与多层列头锁定方法
 
 
(左边图锁定了行头与列头,右边图仅锁定列头)
有许多的锁定或固定html表格表头的方法和技术,本文介绍的是一个基于IE和css的简易实现方法,基本思路为:使用div行级元素确定一个包含表格的区域,在区域滚动移动时定位非固定单元格的位置(top/left)。
1、确定表格区域
定义一个有边框的div元素,并设置其overfloaw属性为scroll,保证该区域恒有一个垂直与水平滚动条。
div#DivContainer
{
    overflow: scroll; border: solid 1px gray;
}
在div中嵌入一个表格,设置collapse属性为collapse,满足单边框(合并边框)的外观。
 
table
{
    border-collapse: collapse;
}
2、单元格锁定选择器类
需要设计三种类型的锁定单元格:垂直方向锁定单元格(VLocked)、水平方向锁定单元格(HLocked)及双向锁定单元格(Locked),而一般表格内容单元格则设置其位置属性position为relative,见如下css代码:
td
{
    position: relative; padding: 5px; border-top: solid 0px gray; border-bottom: solid 1px gray; border-left: solid 0px gray; border-right: solid 1px gray;
}
 
锁定表格行头时,要求行头的单元格水平方不移动,即区域移动时重定位这些行头单元格的left边界值,见如下css代码:
 
td.HLocked /* 水平方向锁住单元格 */
{
z-index: 10; position: relative;
left: expression(parentNode.parentNode.parentNode.parentNode.scrollLeft);
    background-color: #cccccc; text-align: center; border-top: solid 0px gray; border-bottom: solid 1px gray; border-left: solid 0px gray; border-right: solid 1px gray;
}
 
td.VLocked /* 垂直方向锁住单元格 */
{
z-index: 20; position: relative;
top: expression(parentNode.parentNode.parentNode.parentNode.scrollTop); font-size: 10pt; color: black; background-color: #cccccc; text-align: center; border-top: solid 0px gray; border-bottom: solid 1px gray; border-left: solid 0px gray; border-right: solid 1px gray;
}
 
另一种是锁定行头单元格时,这些是行头又是列头的单元格必须双向锁定,见如下css代码:
 
td.Locked
{
z-ind


相关文档:

Mozilla建议的CSS书写顺序

/* mozilla.org Base Styles
* maintained by fantasai
* (classes defined in the Markup Guide - http://mozilla.org/contribute/writing/markup)
*/
/* Suggested order:
//显示属性
* display
* list-style
* position
* float
* clear
//自身属性
* width
* height
* margin
* padding
* border
* ba ......

PHP下载CSS文件中的图片

作为一个资深并且专业的扒皮人员,在我从初三开始投入伟大的互联网中到现在积累了丰富的扒皮经验。我相信每个做web的程序员也都会有类似的经历。
在扒皮过程中,必不可少的需要下载样式文件中的图片。碰到比较庞大的样式文件,其中可能会有上百个需要下载的图片,那么使用下面这段小代码是最为合
适的了。
< ?php
/* ......

50款css工具

50款css工具
引自:http://bbs.seuuo.com/thread-2613-1-3.html
50款CSS工具,包含,CSS网格和布局工具,CSS 优化工具,CSS 菜单生成工具,CSS 按钮生成器,CSS 圆角生成器,CSS 框架,CSS Sprites生成器,CSS 排版工具以及 CSS 表单生成器。
网格和布局The 1KB CSS Grid
新颖的 CSS 网格工具,可用于简化内容管理系统的 ......

CSS处理斜角导航条的一个例子 [源码].txt

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
<title>www.zishu.cn</t ......

CSS_表格在IE与FF中的display

     今天做一个功能,根据select元素选择的不同selectedIndex项,显示一个表格里指定的tr项。
     首先:$("#table tr:gt(0)").css("display","none"); 这个没问题,当要显示的时候.css("display","block"),在FF中布局一下就乱掉了。试了几次都是如此,想了一下,是不是在 ......
© 2009 ej38.com All Rights Reserved. 关于E健网联系我们 | 站点地图 | 赣ICP备09004571号