你的位置:首页 > 网页设计

[网页设计]实现table细线表格效果代码


实现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/