CSS怎麼設定table邊框樣式

今天和大家說一下CSS如何設定table表格邊框樣式，對table設定CSS樣式邊框分為4種情況，以下分別詳細講解這四種情況需要怎麼處理。

1、只對table設定邊框

2、對td設定邊框

3、對table和td技巧性設定表格邊框

4、對table和td設定背景，實現完美表格邊框

以下對以上幾種實現html 表格邊框樣式進行講解與案例示範。為了便於觀察，divcss5均設定所有案例表格為1px實線紅色邊框為例；table寬度為400px;表格為三列三行，對以上四種情況表格外層加個div盒子，分別CSS命名為“.table-a”、“.table-b”、“.table-c”、“.table-d”。

只對錶格table標籤設定邊框

只對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>PHP</td> <td>www.php.cn</td> <td>php</td> </tr> <tr> <td>php</td> <td>www.php.cn</td> <td>php</td> </tr> </table> </div>

CSS設定table邊框樣式的方法就是這些了，有需要的朋友可以儲存一下，也請大家持續關注本站的其他更新。

相關閱讀：

CSS的margin屬性怎麼設定

設定DIV的背景色有哪幾種方法

DIV+CSS怎麼使用