首頁 >web前端 >css教學 >怎樣對table和td技巧性設定表格邊框

怎樣對table和td技巧性設定表格邊框

php中世界最好的语言
php中世界最好的语言原創
2017-11-20 17:37:453044瀏覽

很多朋友都很苦惱表格樣式怎麼設定。之前說過對table設定邊框和對td設定邊框。今天為大家帶來對table和td技巧性設置表格邊框,以後也會繼續更新關於表格的小技巧與設置,也請大家持續關注。

對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} 
/* 
只对table td设置左与上边框,对table设置右与下边框; 
*/ 
</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>PHP</td> 
<td>www.divcss5.com</td> 
<td>PHP</td> 
</tr> 
<tr> 
<td>PHP</td> 
<td>www.php.cn</td> 
<td>PHP</td> 
</tr>

這就是怎麼對table和td技巧性設定表格邊框,你學到了嗎?

相關閱讀:

怎麼用CSS對td設定邊框


怎麼用CSS只對錶格table的標籤設定邊框


以DIV和CSS作下拉式選單

以上是怎樣對table和td技巧性設定表格邊框的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn