在网页中用table做表格比div制作方便快捷,所以我们在很多时候会用到。那么在用table做一些一个表格的时候为了好看或者清晰,一目了然看清楚表格中的内容,通常我们会将表格边框设置出来,由于table中border默认设置1时,我们看到的表格边框还是有一些粗,影响美观。所以通过css来控制table边框能否达到这种下次效果呢?广州网站制作公司浅谈通过CSS设置table边框,希望可以帮到有需要的你!
通过以下几种方式来介绍来设置table边框。
方法一:
设置边框的BORDER=0 、cellspacing=1,设置Table的背景色为所要的边框色,再设置所有的td背景色为白色,这样细边框就显露出来了。这种方法早期做网站的人使用的比较多,而且很普遍哦。
方法二:
设置BORDER=0 ,再通过CSS,给Table加上1px的border-top,border-left,然后再设置所有的td的border-right,border-bottom,这样也能达到所要的效果。可见CSS很是强大啊。
以上两种方式生成的HTML在Word中打开则发生问题,不能达到预期效果。怎么办呢?
方法三:
这种方法最简单方面我通常会用到,设置table的CSS为{border-collapse:collapse;border:none;},再设置td的CSS为{border:solid #000 1px;},大功告成!而且Word也能认出这种设置。
参考CSS具体写法:
将table表格放在div内,然后使用下面的样式。
.tbstyle table{border-collapse:collapse;border:none;}
.tbstyle td{border-collapse:collapse;border:none;}