@ZEAL Blog·厉
WWW Zeal Blog
We stand alone,
TOGETHER.

bordercolorlight的CSS实现

Posted by zeal on 2006-08-04 09:08 , 3836 characters |  + 0 - 0   English
转载请保留本行原始出处声明信息 : http://www.zeali.net/entry/412 MaDe1nZEAL
标签 ( WebDev ):  , 
在 IE 中可以对 table 使用 border + bordercolordark + bordercolorlight 来实现表格边框的明暗效果。但要通过对应的 css 样式定义来实现这种效果,并没有直接的相应属性可用(何况这是IE独有属性)。

对于 IE 来说,我们可以用以下方式来美化表格的边框(或许有的人已经根本摒弃了 table 元素的使用。但在我看来, table 在进行数据排列上还是具有 div / span 所无法比拟的优点):

但可惜,这样的写法只能在 IE 下看到效果,并且无法方便的针对单个页面来进行个性化的样式定制。所以首先我们需要把这部分代码改成 css 样式定义,以便于以后的维护修改。

据说可以使用 IE 特有的 css 样式属性来进行对应:

但似乎 table-border-color-light 属性并没有起作用,至少在我的 IE6 下面无效,可能只是某些 IE 版本下的语法。

所以还是得想办法用标准的 css 语法来实现相同的最终页面体现:

通过这样对 table 和 td 分别定义 border 的样式就能够实现与 border + bordercolordark + bordercolorlight 相同的效果,并且能够兼容于其他浏览器 :)通过修改colorTest 每个 border的定义就可以实现各种不同的表格边框明暗效果。唯一的缺点就是增加了 HTML 的代码量,你必须对每个 td 都定义 className Updated 2006-08-04 15:02 -- 感谢POPOEVER的提醒,可以根据 css 的 class 继承关系来定义table/td,就不需再为table里面的每个td强制指定className(同样可以在IE/Firefox下得到相同的显示效果):

Last Modified on 2007-05-28 14:20
7 条评论:
- POPOEVER () (link) 于 2006-08-04 11:01
table[class="colorTest"] td 替换 td.colortesting,HTML里的td后面就不用加class="colorTest"了,很基础的写法
- POPOEVER () (link) 于 2006-08-04 11:03
sorry,写错,是 table[class="colorTest"] td 替换 td.colorTest,呵呵
- zeal (link) 于 2006-08-04 11:42
这样的话就修改了整个页面所有td的缺省样式。如果要对整个页面的表格采用一样的效果的话,连table 也不需要加class了,直接定义 table 和 td 的 css 样式。
- POPOEVER () (link) 于 2006-08-04 12:52
错,只针对className="colorTest"的table标签下的td标签,不是针对全部table和td标签,你还可以table[class="colorTest"]>td来使样式不影响td里的嵌套表格
- zeal (link) 于 2006-08-04 13:54
你是说可以这样写:

<style type="text/css">
TABLE.colorTest{
border-top: 1px solid #EBEAEE;
border-left: 1px solid #EBEAEE;
border-right: 0px;
border-bottom: 0px;
}
table[class="colorTest"] td{
border-top: 1px solid #FFFFFF;
border-left: 1px solid #FFFFFF;
border-right: 1px solid #EBEAEE;
border-bottom: 1px solid #EBEAEE;
}
</style>


我试了一下似乎无效。不知道是不是我理解有错。
- POPOEVER () (link) 于 2006-08-04 14:47
哦,没注意你是用IE的,这个支持FF/Opera,IE的话用.colorTest td 替换TD.colorTest即可
- 砖机 () (link) 于 2010-12-30 15:57
O(∩_∩)O~,挺好的,学到了不少东西
日志存档
2014年
2013年
2012年
2011年
2010年
2009年
2008年
2007年
2006年
本 Blog 原创内容
遵循以下授权:

Creative Commons
(创作共用) CC

署名-非商业性
-相同方式分享
ZEAL Blog 基于
Powered byPivot - 1.24.1: 'Arcee'
Pivot1.24.1
开发
系统部署于
Linode.com
Launched @
2005-04-27
Since 2005.04.27  梦想 就像鸡蛋 要么孵化 要么臭掉RSS Feed (Entries) | About me | Back To Home | @ZEAL | zbird.com | 沪ICP备05024379号