實現table細線表格效果代碼:細線表格相比較表格的預設表格來說要美觀很多，當然更受歡迎，下麵就通過代碼實例介紹一下如何實現此效果。代碼如下: 螞蟻部落 螞蟻部落一 螞蟻部落二 javascript教程 jQuery教程 ...
實現table細線表格效果代碼:
細線表格相比較表格的預設表格來說要美觀很多，當然更受歡迎，下麵就通過代碼實例介紹一下如何實現此效果。
代碼如下:
<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style type="text/css"> .table{ width:300px; height:100px; border:1px solid #ccc; border-collapse:collapse; } .table td,.table th { border:1px solid #ccc; padding:5px; } </style> </head> <body> <table class="table"> <thead> <tr> <th>螞蟻部落一</th> <th>螞蟻部落二</th> </tr> </thead> <tr> <td>javascript教程</td> <td>jQuery教程</td> </tr> <tr> <td>HTML教程</td> <td>div css教程</td> </tr> </table> </body> </html>
以上代碼實現了我們的要求，代碼非常的簡單，主要是使用瞭如下代碼:
border-collapse:collapse
border-collapse屬性可以參閱CSS的border-collapse屬性一章節。
原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=12690
更多內容可以參閱:http://www.softwhy.com/divcss/
