用CSS設(shè)置表格Table的細(xì)邊框的比較好用的方法

2024-07-11 08:46:53

字體：大中小

供稿：網(wǎng)友

設(shè)置Table的細(xì)邊框通常有這么幾種方式：

1、設(shè)置邊框的BORDER=0 、cellspacing=1，設(shè)置Table的背景色為所要的邊框色，再設(shè)置所有的td背景色為白色，這樣細(xì)邊框就顯露出來(lái)了。這個(gè)方法有些邪氣，看似不太正宗，但是也能達(dá)到效果，條條大路通羅馬嘛！

再來(lái)看看第二種方法：

來(lái)源：(http://blog.sina.com.cn/s/blog_565812e60100czbn.html) - Css : 用CSS設(shè)置Table的細(xì)邊框的幾種方法_Lily_新浪博客
2、設(shè)置BORDER=0 ，再通過(guò)CSS，給Table加上1px的border-top,border-left，然后再設(shè)置所有的td的border-right,border-bottom，這樣也能達(dá)到所要的效果。可見(jiàn)CSS很是強(qiáng)大啊。

今天在實(shí)踐過(guò)程中發(fā)現(xiàn)，以上兩種方式生成的HTML在Word中打開(kāi)則發(fā)生問(wèn)題，不能達(dá)到預(yù)期效果。怎么辦呢！？

下面介紹一種更為簡(jiǎn)便有效的方法：

3、設(shè)置table的CSS為{border-collapse:collapse;border:none;},再設(shè)置td的CSS為{border:solid #000 1px;}，大功告成！而且Word也能認(rèn)出這種設(shè)置。

我發(fā)現(xiàn)設(shè)置table的CSS為{border-collapse:collapse;border:none;},再設(shè)置td的CSS為{border:solid#000 1px;}是一個(gè)非常不錯(cuò)的方法。
示例：

提示：您可以先修改部分代碼再運(yùn)行

上一篇：IE6 select z-index無(wú)效，遮擋div bug的解決方法

下一篇：css3 border-image使用說(shuō)明