css表格样式 http://CrazyCoder.cn/Tag/31371/Index.html 2010-07-31 CrazyCoder 1.0(beta) zh-cn Copyright 1996 - 2008 疯狂代码 All Rights Reserved. 2010-07-31 <![CDATA[css表格:基于IE和css的表格行头和多层列头锁定思路方法]]> http://CrazyCoder.cn/DataBase/Article65383.html

(左边图锁定了行头和列头右边图仅锁定列头)
有许多锁定或固定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、单元格锁定选择器类
需要设计 3种类型锁定单元格:垂直方向锁定单元格(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-index: 30; position: relative; top: expression(parentNode.parentNode.parentNode.parentNode.scrollTop); left: expression(parentNode.parentNode.parentNode.parentNode.scrollLeft); 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;
}

需要指出表格td元素parentNode元素是trtr.parentNode元素是tbodytbody.parentNode元素是table所以td.parentNode.parentNode.parentNode.parentNode是定制div元素即当前表格区域
锁定表格列头时需要考虑两种情况单元格种是不锁定行头单元格此时只需要垂直方向不移动即可见如下css代码:


还有两点需要介绍说明:
使用了z-index坐标并且是Locked类选择器z-index值最大即最靠近浏览者；
在aspx中使用时需要删除Visual Studio自动产生<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">行
下面是完整css代码和htm演示代码测试时需要建立个IIS虚拟路径拷贝css文件和htm文件到该虚拟路径中然后通过浏览器浏览htm文件:
+ expand sourceview plaincopy to clipboardpr?
div#DivContainer
{
overflow: scroll; border: solid 1px gray;
}
table
{
border-collapse: collapse;
}
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;
}
td.Locked /* 水平和垂直方向锁住单元格, 不随鼠标或滚动条移动 */
{
z-index: 30; position: relative;
top: expression(parentNode.parentNode.parentNode.parentNode.scrollTop);
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.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);
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;
}
div#DivContainer
{
overflow: scroll; border: solid 1px gray;
}
table
{
border-collapse: collapse;
}
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;
}
td.Locked /* 水平和垂直方向锁住单元格, 不随鼠标或滚动条移动 */
{
z-index: 30; position: relative;
top: expression(parentNode.parentNode.parentNode.parentNode.scrollTop);
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.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);
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;
}


[查看PDF电子文档] ]]> 数据库 2009-08-16 http://CrazyCoder.cn/DataBase/Article65383.html <![CDATA[css表格:基于IE和css的表格行头和多层列头锁定思路方法]]> http://CrazyCoder.cn/DotNet/Article64060.html 基于IE和css<img src='/icons/18883de.gif' />表格行头和多层列头锁定思路方法_ASP.NET窍门技巧_www.knowsky.com 加入收藏 | RSS订阅
Copyright © 2000-2009 www.knowsky.com All rights reserved | 沪ICP备05001343号


ホームページ制作 不動産検索システム 求人情報

アクセサリー　通販 フットサル大会 探偵

SEO対策 コーチ ホームページ作成

過払い請求 現金化 債務整理 現金化



[查看PDF电子文档] ]]> DotNet 2009-08-16 http://CrazyCoder.cn/DotNet/Article64060.html <![CDATA[itunes数据执行保护:iTunes 数据表格样式]]> http://CrazyCoder.cn/DeveloperUtil/Article54323.html
　　Div层里包含了个Div作为标题栏和个Table作为数据表格数据表格行通过样式even/odd来形成斑马线

: <div ="grid">　 2:　　 <!-- title bar ... -->　 3:　　 <div ="title">The title goes here</div>　 4:　　 <table ="datatable" cellpadding="0" cellspacing="0">　 5:　　　　 <thead>　 6:　　　　　　 <!-- header row goes here -->　 7:　　　　　　 <tr>　 8:　　　　　　　　 <th>First Name</th>　 9:　　　　　　　　 <th>Last Name</th>　10:　　　　　　 </tr>　11:　　　　 </thead>　12:　　　　 <tbody>　13:　　　　　　 <!-- data rows go here -->　14:　　　　　　 <tr ="even">　15:　　　　　　　　 <td>Matt</td>　16:　　　　　　　　 <td>Berh</td>　17:　　　　　　 </tr>　18:　　　　　　 <tr ="odd">　19:　　　　　　　　 <td>Tony</td>　20:　　　　　　　　 <td>Montana</td>　21:　　　　　　 </tr>　　　　　　　　　　　22:　　　　 </tbody>　23:　　 </table>　24: </div>
　　图片

　　每个皮肤用了4张图片2个箭头(升序和降序)两张默认标题列背景图片和处于排序状态标题列背景

　　排序箭头

　　排序

　　我用是jQuery表格排序插件在客户端进行排序

　　标签生成

　　由于灵活性在客户端输出HTML应该像上边那样　通过JTemplates或者Asp.NetListView生成上边HTML样式很容易实现要想用tablesorter插件对GridView提供客户端排序需要多写点代码GridView默认情况是没有THEAD

　 3: $('#gridView .datatable').prepend(　 4:　　 //　remove the header and wrap it in a THEAD　 5:　　 $('<thead></thead>').append($('#gridView .datatable TR.header').remove)　 6: );

[查看PDF电子文档] ]]> 编程综合 2009-01-15 http://CrazyCoder.cn/DeveloperUtil/Article54323.html <![CDATA[css样式:关于.net中页面CSS样式丢失的解决方案]]> http://CrazyCoder.cn/DotNet/Article33730.html 使用.net开发小站点时候发现放入.net代码之后页面特定区域定义好CSS样式莫名其妙没了找了很多方法结果发现居然是CSS里注释惹祸
原CSS代码如下view plaincopy to clipboardpr?
/*右侧区域*/
.RightPart{width:230px;margin-top:10px;}
.RightPart{text-align:left;}
.RightPart .Title{background:url(../images/RightPartTitle.g) no-repeat left top;padding-left:32px;height:47px;}
.RightPart .TitleR{background:url(../images/RightPartTitleRed.g) no-repeat left top;padding-left:32px;height:47px;}
.RightPart .TitleG{background:url(../images/RightPartTitleG.g) no-repeat left top;padding-left:32px;height:47px;}
.RightPart h3{font-size:14px;color:#FFF;}
.RightPart .LeftBorder{width:8px;background:url(../images/make_default_2_1.jpg) repeat-y left top;}
.RightPart .RightBorder{width:9px;background:url(../images/make_default_2_2.jpg) repeat-y right top;}
.RightPart .Content{width:205px;padding:0 5px;}
.RightPart ul{list-style:none;}
.RightPart li{display:block;background:url(../images/page_story_icon_ball.jpg) no-repeat left 3px;padding:3px 0 3px 15px;}
/*地图分类*/
.RightPart .Category li{font-size:16px;font-weight:bold;background:url(../images/page_story_icon_ball.jpg) no-repeat left 5px;margin:4px 0 4px 10px;}
.RightPart .Category .Line{background:left top;padding:0;margin:0 0 0 3px !Important;margin:-13px 0 0 3px;width:auto;height:4px;}

/*右侧区域*/
.RightPart{width:230px;margin-top:10px;}
.RightPart{text-align:left;}
.RightPart .Title{background:url(../images/RightPartTitle.g) no-repeat left top;padding-left:32px;height:47px;}
.RightPart .TitleR{background:url(../images/RightPartTitleRed.g) no-repeat left top;padding-left:32px;height:47px;}
.RightPart .TitleG{background:url(../images/RightPartTitleG.g) no-repeat left top;padding-left:32px;height:47px;}
.RightPart h3{font-size:14px;color:#FFF;}
.RightPart .LeftBorder{width:8px;background:url(../images/make_default_2_1.jpg) repeat-y left top;}
.RightPart .RightBorder{width:9px;background:url(../images/make_default_2_2.jpg) repeat-y right top;}
.RightPart .Content{width:205px;padding:0 5px;}
.RightPart ul{list-style:none;}
.RightPart li{display:block;background:url(../images/page_story_icon_ball.jpg) no-repeat left 3px;padding:3px 0 3px 15px;}
/*地图分类*/
.RightPart .Category li{font-size:16px;font-weight:bold;background:url(../images/page_story_icon_ball.jpg) no-repeat left 5px;margin:4px 0 4px 10px;}
.RightPart .Category .Line{background:left top;padding:0;margin:0 0 0 3px !Important;margin:-13px 0 0 3px;width:auto;height:4px;}　　丢失就是“/*地图分类*/”下面两行CSS效果
　　把“/*地图分类*/”注释去除了结果Ｆ５下居然发现页面正常了 看来之前遇到问题也是样啊

　　方案总结
　　如果在.net加代码时候发现定义CSS样式效果丢失在确定没有其它问题情况下试着删除些丢失样式附近CSS注释就可以解决问题

[查看PDF电子文档] ]]> DotNet 2008-12-13 http://CrazyCoder.cn/DotNet/Article33730.html <![CDATA[titile:css固定表格titile和首列的实现]]> http://CrazyCoder.cn/HtmlJiaoCheng/Article19296.html 本来是confuseLing给我发来了一段代码，实现了锁定title和firstcol的css，但是在用户体验上并不好，我整理了一下。言归正传，直接说这个的实现。
test.css:
.firstRow{...}{
background-color:#CC9900;
top:expression(this.offsetParent.scrollTop);
z-index:10;
position:relative;
}
.corner{...}{
background-color:#CC9900;
z-index:10;
left:expression(this.parentElement.offsetParent.scrollLeft);
top:expression(this.offsetParent.scrollTop);
position:relative;
}
.firstCol{...}{
background-color:white;
z-index:10;
left:expression(this.parentElement.offsetParent.scrollLeft);
position:relative;
}
.relative{...}{
position:relative;
}
div{...}{
overflow:auto;
width:300px;
height:150px;
}
tr{...}{height:50px;}

test.html:

<html>
<head>
<title>testcss</title>
<metahttp-equiv=\"Content-Type\"content=\"text/html;charset=shift_jis\">
<linkhref=\"test.css\"type=\"text/css\"rel=\"stylesheet\">
</head>
<body>
<div>
<tableborder=\"1px\"cellpadding=\"0\"cellspacing=\"0\"width=\"500px\">
<trclass=\"firstRow\">
<tdclass=\"corner\">1thRow</td>
<tdclass=\"relative\">1thRow</td>
<tdclass=\"relative\">1thRow</td>
<tdclass=\"relative\">1thRow</td>
<tdclass=\"relative\">1thRow</td>
</tr>
<trclass=\"relative\">
<tdclass=\"firstCol\">2thRow</td>
<td>2thRow</td>
<td>2thRow</td>
<td>2thRow</td>
<td>2thRow</td>
</tr>
<trclass=\"relative\">
<tdclass=\"firstCol\">3thRow</td>
<td>3thRow</td>
<td>3thRow</td>
<td>3thRow</td>
<td>3thRow</td>
</tr>
<trclass=\"relative\">
<tdclass=\"firstCol\">4thRow</td> [Page]
<td>4thRow</td>
<td>4thRow</td>
<td>4thRow</td>
<td>4thRow</td>
</tr>
</table>
</div>
</body>
</html>


这个的用户体验并不好，尤其是scroll之后，画面的边缘有略微的毛边，是不是可以把tableborder干掉，然后每个cell设置cellborder，可以解决这个问题，今天我是没有空来探讨啦。
另外这个css的expression并不支持最新的css2.0和html4.0标准。虽然最新的ie支持但是加上了w3c的标准后，程序像预想一样正常运行。
这里介绍一个软件：
TopStylePro3.0可以检测css是否符合w3c的web2.0标准。
至少因为使用了expression。上述代码无法通过web2.0的：
<!DOCTYPEHTMLPUBLIC\"-//W3C//DTDHTML4.01Transitional//EN\"
\"http://www.w3.org/TR/html4/loose.dtd\">标准
TopStylePro3.0试用期注册表破解字段为：
HKU\\S-1-5-21-1177238915-1580818891-1060284298-500\\Software\\Microsoft\\Windows\\CurrentVersion\\WinSHTrack
是论日算的，从那天起不知道，但是你给它加1000天，就慢慢使用吧。
使用RegShot监测的c:\\和注册标的变化查到的这个字段，虽然还是很讨厌的会弹出试用框，但是毕竟可以长期使用了。 [查看PDF电子文档] ]]> Html教程 2008-09-26 http://CrazyCoder.cn/HtmlJiaoCheng/Article19296.html