DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> DIV十CSS布局 >> 布局實例 >> 表格邊框以虛線顯示的css樣式
表格邊框以虛線顯示的css樣式
編輯:布局實例     

表格邊框默認是以實線進行顯示的,怎麼才能把它變成虛線呢?其實很簡單只要簡單加一些樣式屬性便可搞定,希望下面的例子對大家有所幫助

 

 

復制代碼 代碼如下:
<style>
.table5{text-align:center; border:1px solid #cccccc; border-radius :3px; background-color:#FFFFFF; width:650px;}
.table5 td{border-bottom:1px dashed #cccccc;}
.table5 .last td{border-bottom:0;}
</style>

 

復制代碼 代碼如下:


<table width="100%" border="0" cellpadding="2" cellspacing="0" class="table5">
<tr >
<td colspan="4">&nbsp;</td>
</tr>
<tr >
<td width="4%"><img src="images/greendot.jpg" width="4" height="4" /></td>
<td width="17%" class="text-fl">萍水相逢</td>
<td width="63%" align="center" class="text-fl">消費10個金幣,對換10元手機費</td>
<td width="16%" align="center" valign="middle">2013.01.20</td>
</tr>
<tr class="last">
<td ><img src="images/greendot.jpg" /></td>
<td class="text-fl">M萍水相MM</td>
<td align="center" class="text-fl">消費500積分,對換500粉絲</td>
<td align="center" valign="middle">2013.01.20</td>
</tr>
<tr >
<td colspan="4"></td>
</tr>
</table>

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved