细线边框的完美做法

文章地址:http://blog.chinaunix.net/u/6138/showart_193355.html
在网页中制作一个带边框的表格时,即使把border设为1还是很粗,很难看,

有人说到过用cellpadding="*" cellspacing="*"的方法设置,但比较麻烦,原理也不好理解,

其实用css控制就非常容易了。只需要在css文件中加上

table#border{
    border-top:#000 1px solid;
    border-left:#000 1px solid;
    }
table#border td{
    border-bottom:#000 1px solid;
    border-right:#000 1px solid;
    }
然后再要加边框的html文件中加上
<table id="border" width="100%" border="0" cellpadding="0" cellspacing="0">

其中CSS中的table表示修饰的对象是table,#表示这是一个ID。效果很好。
不用在table里加样式border-collapse:collapse,从而使table达到细线边框效果(border-width:1px)

<style>
table#border{
    border-top:#000 1px solid;
    border-left:#009 1px solid;
    }
table#border td{
    border-bottom:#090 1px solid;
    border-right:#e00 1px solid;
    }
</style><table id="border" width="234" border="0" cellpadding="0" cellspacing="0" height="99"><tr><td>&nbsp;</td><td>&nbsp;</td></tr><tr><td>&nbsp;</td><td>&nbsp;</td></tr></table>

 

<style>
table#border {
    background: #f00;
}
table#border td {
    background: #fff;
}
</style>
<table id="border" width="234" border="0" cellpadding="0" cellspacing="1" height="99"><tr><td>&nbsp;</td><td>&nbsp;</td></tr><tr><td>&nbsp;</td><td>&nbsp;</td></tr></table>

300*300
  • 没有相关文章
  • 没有评论
 文章首页关于迷茫时代关于我写意人生
版权所有:迷茫时代 All rights reserved   
执行时间:0.00490 秒