实现table细线表格效果代码_html/css_WEB-ITnose

WBOY
發布: 2016-06-24 11:30:35
原創
1205 人瀏覽過

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

 

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板