用CSS设置表格Table的细边框的比较好用的方法
发布时间：2010-06-23 12:13:05 作者：佚名 
我要评论
我要评论大家经常会发现Table的BORDER设置为1，得到的边框却不是想要的1个像素的细边框，于是很多人去想方设法做出细边框的效果。
设置Table的细边框通常有这么几种方式：
1、设置边框的BORDER=0 、cellspacing=1，设置Table的背景色为所要的边框色，再设置所有的td背景色为白色，这样细边框就显露出来了。这个方法有些邪气，看似不太正宗，但是也能达到效果，条条大路通罗马嘛！
再来看看第二种方法：
来源：(http://blog.sina.com.cn/s/blog_565812e60100czbn.html) - Css : 用CSS设置Table的细边框的几种方法_Lily_新浪博客
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也能认出这种设置。
我发现设置table的CSS为{border-collapse:collapse;border:none;},再设置td的CSS为{border:solid#000 1px;}是一个非常不错的方法。
示例：
提示：您可以先修改部分代码再运行
1、设置边框的BORDER=0 、cellspacing=1，设置Table的背景色为所要的边框色，再设置所有的td背景色为白色，这样细边框就显露出来了。这个方法有些邪气，看似不太正宗，但是也能达到效果，条条大路通罗马嘛！
再来看看第二种方法：
来源：(http://blog.sina.com.cn/s/blog_565812e60100czbn.html) - Css : 用CSS设置Table的细边框的几种方法_Lily_新浪博客
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也能认出这种设置。
我发现设置table的CSS为{border-collapse:collapse;border:none;},再设置td的CSS为{border:solid#000 1px;}是一个非常不错的方法。
示例：
提示：您可以先修改部分代码再运行
相关文章
Dreamweaver中怎么让html网页中的table边框细线显示?
Dreamweaver中怎么让html网页中的table边框细线显示？Dreamweaver中插入表格默认是宽边框的，看上去很难看，该怎么将边框设置成细线呢？请看下文详细介绍，需要的朋友可以2016-03-10- Table默认是有外边框，有内边框的，那么如何通过css样式简单实现Table没有外边框，只有内边框呢？下面有个不错的示例，大家可以看看2014-06-13
一个属性border-collapse解决Table的边框问题
表格的边框算是页面制作中最头痛的，带边线的表格在之前非常讨厌做，不过今天终于解决了这个问题，下面将示例与大家分享下2014-03-26- 在默认的情况下，我们的CSS将Table的边框清除掉了，下面与大家分享下CSS控制Table内外边框、颜色、大小的样式，想学习的朋友可以参考下2013-08-01
- 在css中已经写好了使table不显示边框的代码，在ie浏览器中显示正常，但是在火狐和谷歌浏览器中显示不正常，table的每个边框都显示了出来，因为浏览器不同带来的麻烦可是不2013-06-26
- 表格边框的显示与隐藏，是可以用frame参数来控制的。请注意它只控制表格的边框图，而不影晌单元格。2011-04-01
- 表格边框的处理是CSS网页布局中经常会遇到的内容，在webjx.com中也有过相关的介绍，除了将表格作为一个整体进行定义，您也可以将表格边框的四个部分分别进行定义，包括顶部2010-01-23
- 前面学了网页表格中的单元格线条的设置方法,今天学习网页表格的边框线的设置方法。 ------------------------------------------------------------------------------2008-10-17
- 网页表格表框制作技巧。 -------------------------------------------------------------------------------- 表格边框的显示与隐藏，是可以用frame参数来控制的。请2008-10-17
- 这篇文章主要介绍了Table显示你要显示的边框代码的相关资料,需要的朋友可以参考下2016-05-03
最新评论