用CSS設(shè)置表格Table的細(xì)邊框的比較好用的方法
發(fā)布時(shí)間：2010-06-23 12:13:05 作者：佚名 
我要評論
我要評論大家經(jīng)常會發(fā)現(xiàn)Table的BORDER設(shè)置為1，得到的邊框卻不是想要的1個像素的細(xì)邊框，于是很多人去想方設(shè)法做出細(xì)邊框的效果。
設(shè)置Table的細(xì)邊框通常有這么幾種方式：
1、設(shè)置邊框的BORDER=0 、cellspacing=1，設(shè)置Table的背景色為所要的邊框色，再設(shè)置所有的td背景色為白色，這樣細(xì)邊框就顯露出來了。這個方法有些邪氣，看似不太正宗，但是也能達(dá)到效果，條條大路通羅馬嘛！
再來看看第二種方法：
來源：(http://blog.sina.com.cn/s/blog_565812e60100czbn.html) - Css : 用CSS設(shè)置Table的細(xì)邊框的幾種方法_Lily_新浪博客
2、設(shè)置BORDER=0 ，再通過CSS，給Table加上1px的border-top,border-left，然后再設(shè)置所有的td的border-right,border-bottom，這樣也能達(dá)到所要的效果?？梢奀SS很是強(qiáng)大啊。
今天在實(shí)踐過程中發(fā)現(xiàn)，以上兩種方式生成的HTML在Word中打開則發(fā)生問題，不能達(dá)到預(yù)期效果。怎么辦呢??？
下面介紹一種更為簡便有效的方法：
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;}是一個非常不錯的方法。
示例：
提示：您可以先修改部分代碼再運(yùn)行
1、設(shè)置邊框的BORDER=0 、cellspacing=1，設(shè)置Table的背景色為所要的邊框色，再設(shè)置所有的td背景色為白色，這樣細(xì)邊框就顯露出來了。這個方法有些邪氣，看似不太正宗，但是也能達(dá)到效果，條條大路通羅馬嘛！
再來看看第二種方法：
來源：(http://blog.sina.com.cn/s/blog_565812e60100czbn.html) - Css : 用CSS設(shè)置Table的細(xì)邊框的幾種方法_Lily_新浪博客
2、設(shè)置BORDER=0 ，再通過CSS，給Table加上1px的border-top,border-left，然后再設(shè)置所有的td的border-right,border-bottom，這樣也能達(dá)到所要的效果?？梢奀SS很是強(qiáng)大啊。
今天在實(shí)踐過程中發(fā)現(xiàn)，以上兩種方式生成的HTML在Word中打開則發(fā)生問題，不能達(dá)到預(yù)期效果。怎么辦呢??？
下面介紹一種更為簡便有效的方法：
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;}是一個非常不錯的方法。
示例：
提示：您可以先修改部分代碼再運(yùn)行
相關(guān)文章
Dreamweaver中怎么讓html網(wǎng)頁中的table邊框細(xì)線顯示?
Dreamweaver中怎么讓html網(wǎng)頁中的table邊框細(xì)線顯示？Dreamweaver中插入表格默認(rèn)是寬邊框的，看上去很難看，該怎么將邊框設(shè)置成細(xì)線呢？請看下文詳細(xì)介紹，需要的朋友可以2016-03-10CSS樣式簡單實(shí)現(xiàn)Table沒有外邊框只有內(nèi)邊框
Table默認(rèn)是有外邊框，有內(nèi)邊框的，那么如何通過css樣式簡單實(shí)現(xiàn)Table沒有外邊框，只有內(nèi)邊框呢？下面有個不錯的示例，大家可以看看2014-06-13一個屬性border-collapse解決Table的邊框問題
表格的邊框算是頁面制作中最頭痛的，帶邊線的表格在之前非常討厭做，不過今天終于解決了這個問題，下面將示例與大家分享下2014-03-26- 在默認(rèn)的情況下，我們的CSS將Table的邊框清除掉了，下面與大家分享下CSS控制Table內(nèi)外邊框、顏色、大小的樣式，想學(xué)習(xí)的朋友可以參考下2013-08-01
- 在css中已經(jīng)寫好了使table不顯示邊框的代碼，在ie瀏覽器中顯示正常，但是在火狐和谷歌瀏覽器中顯示不正常，table的每個邊框都顯示了出來，因?yàn)闉g覽器不同帶來的麻煩可是不2013-06-26
- 表格邊框的顯示與隱藏，是可以用frame參數(shù)來控制的。請注意它只控制表格的邊框圖，而不影晌單元格。2011-04-01
- 表格邊框的處理是CSS網(wǎng)頁布局中經(jīng)常會遇到的內(nèi)容，在webjx.com中也有過相關(guān)的介紹，除了將表格作為一個整體進(jìn)行定義，您也可以將表格邊框的四個部分分別進(jìn)行定義，包括頂部2010-01-23
- 前面學(xué)了網(wǎng)頁表格中的單元格線條的設(shè)置方法,今天學(xué)習(xí)網(wǎng)頁表格的邊框線的設(shè)置方法。 ------------------------------------------------------------------------------2008-10-17
- 網(wǎng)頁表格表框制作技巧。 -------------------------------------------------------------------------------- 表格邊框的顯示與隱藏，是可以用frame參數(shù)來控制的。請2008-10-17
- 這篇文章主要介紹了Table顯示你要顯示的邊框代碼的相關(guān)資料,需要的朋友可以參考下2016-05-03