-
用CSS设置Table的细边框的几种方法 - [网页++]2008-11-11
版权声明:转载时请以超链接形式标明文章原始出处和作者信息及本声明
http://crazyrabbit.blogbus.com/logs/31227647.html
本文转自http://www.cnblogs.com/don/articles/1289914.html
大家经常会发现Table的BORDER设置为1,得到的边框却不是想要的1个像素的细边框,于是很多人去想方设法做出细边框的效果。
设置Table的细边框通常有这么几种方式:
1、设置边框的BORDER=0 、cellspacing=1,设置Table的背景色为所要的边框色,再设置所有的td背景色为白色,这样细边框就显露出来了。这个方法有些邪气,看似不太正宗,但是也能达到效果,条条大路通罗马嘛!
再来看看第二种方法:
2、设置BORDER=0 ,再通过CSS,给Table加上1px的border-top,border-left,然后再设置所有的td的border-right,border-bottom,这样也能达到所要的效果。可见CSS很是强大啊。
今天在实践过程中发现,以上两种方式生成的HTML在Word中打开则发生问题,不能达到预期效果。怎么办呢!?
下面介绍一种更为简便有效的方法:
3、设置table的CSS为{border-collapse:collapse;border:none;},再设置td的CSS为{border:solid #000 1px;},大功告成!而且Word也能认出这种设置。
笔者目前只想出这么几种常用的方法,不知是否还有其他设置细边框妙招,若哪位达人知道请跟贴写下哦!!随机文章:
Dreamweaver易被忽略的问题————技巧 2008-11-24CSS hack:区分IE6,IE7,firefox 2008-11-10转载 那一年 我们都没有钱 2008-10-14给你设计灵感 2008-08-21firefox下载日活动 2008-06-17
收藏到:Del.icio.us








评论
第三种不可取。设置td 的border,那么相邻的td的border就会显得宽。
比如td{border:1px solid #000;}那么相邻td的border看上去就是2px了,而边界的是1px。