CSS如何設置html table表格邊框樣式

CSS如何設置table表格邊框樣式 對table設置css樣式邊框，分為幾種情況： 1、只對table設置邊框 2、對td設置邊框 3、對table和td技巧性設置表格邊框 4、對table和td設置背景，實現完美表格邊框
以下DIVCSS5對以上幾種實現html 表格邊框樣式進行講解與案例演示。為了便於觀察，divcss5均設置所有案例表格為1px實線紅色邊框為例；table寬度為400px;表格為三列三行，對以上四種情況表格外層加個div盒子，分別CSS命名為“.table-a”、“.table-b”、“.table-c”、“.table-d”。
一、只對表格table標簽設置邊框   -   TOP
只對table標簽設置border（邊框）樣式，將讓此表格最外層table一個邊框，而表格內部不產生邊框樣式。
案例詳細如下： 1、對應css代碼

 <style> .table-a table{border:1px solid #F00} /* css注釋：只對table標簽設置紅色邊框樣式 */ </style> 

2、對應html代碼片段

 <div class="table-a"> <table width="400" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="105">站名</td> <td width="181">網址</td> <td width="112">說明</td> </tr> <tr> <td>DIVCSS5</td> <td>www.divcss5.com</td> <td>CSS學習</td> </tr> <tr> <td>CSS5</td> <td>www.css5.com.cn</td> <td>CSS切圖</td> </tr> </table> </div> 

3、案例截圖
二、對td設置邊框   -   TOP
對table表格td設置邊框樣式，表格對象內td將實現邊框樣式，但中間部分td會導致出現雙邊框。
詳細案例教程如下：
1、對應css代碼

 <style> .table-b table td{border:1px solid #F00} /* css注釋：只對table td標簽設置紅色邊框樣式 */ </style> 

2、對應html源代碼片段

 <div class="table-b"> <table width="400" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="105">站名</td> <td width="181">網址</td> <td width="112">說明</td> </tr> <tr> <td>DIVCSS5</td> <td>www.divcss5.com</td> <td>CSS學習</td> </tr> <tr> <td>CSS5</td> <td>www.css5.com.cn</td> <td>CSS切圖</td> </tr> </table> 

3、案例截圖
三、對table和td技巧性設置表格邊框   -   TOP
如上第二點，只對表格對象td設置單一邊框樣式，中間部分td與td標簽之間就會出現雙邊框現象。
解決方法：對td只設置兩個邊的邊框，對table也設置兩個邊的邊框樣式。
解釋：對td設置左與上邊框，這樣td與td相鄰就會只出現單一邊框樣式，這樣就會出現表格右側和下部沒有邊框，這個時候我們設置table右和下 邊框解決顯示右側和下側td剩下未顯示邊框。
1、對應css代碼：

 <style> .table-c table{border-right:1px solid #F00;border-bottom:1px solid #F00} .table-c table td{border-left:1px solid #F00;border-top:1px solid #F00} /* css 注釋： 只對table td設置左與上邊框； 對table設置右與下邊框； 為了便於截圖，我們將css 注釋說明換行排版 */ </style> 

2、對應html源代碼片段：

 <div class="table-c"> <table width="400" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="105">站名</td> <td width="181">網址</td> <td width="112">說明</td> </tr> <tr> <td>DIVCSS5</td> <td>www.divcss5.com</td> <td>CSS學習</td> </tr> <tr> <td>CSS5</td> <td>www.css5.com.cn</td> <td>CSS切圖</td> </tr> </table> 

3、表格邊框實現案例截圖