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怎麼使用

以上是CSS怎麼設定table邊框樣式的詳細內容。更多資訊請關注PHP中文網其他相關文章！