有间距的表格布局 table布局
2018-06-24 01:32:09来源:未知 阅读 ()
1、先看有间距的布局效果:
2、少说多做,直接看代码(代码中有注释)
1 <!DOCTYPE html> 2 <html lang="zh"> 3 4 <head> 5 <meta charset="UTF-8" /> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge" /> 7 <title>有间距的表格布局</title> 8 <style type="text/css"> 9 * { 10 margin: 0; 11 padding: 0; 12 } 13 14 table { 15 width: 500px; 16 margin-top: 30px; 17 border-collapse: separate; 18 /*关键设置:间距5px*/ 19 border-spacing: 5px; 20 /*均匀分布效果*/ 21 table-layout: fixed; 22 } 23 24 table th { 25 height: 44px; 26 font-size: 18px; 27 color: #fff; 28 text-align: center; 29 background-color: #1262a2; 30 } 31 32 table td { 33 height: 44px; 34 font-size: 16px; 35 color: #000; 36 text-align: center; 37 background-color: #e5e5e5; 38 } 39 </style> 40 </head> 41 42 <body> 43 <table> 44 45 <thead> 46 <tr> 47 <th>部门</th> 48 <th>联系方式</th> 49 </tr> 50 </thead> 51 <tbody> 52 <tr> 53 54 <td>综合办公室</td><br /> 55 <td>65892365<br />35093269(FAX)</td> 56 </tr> 57 <tr> 58 59 <td>党群工作部</td> 60 <td>65895682</td> 61 </tr> 62 <tr> 63 <td>财务会计处</td> 64 <td>55216949</td> 65 </tr> 66 <tr> 67 <td>业务监管处</td> 68 <td>65896474</td> 69 </tr> 70 <tr> 71 <td>指挥中心</td> 72 <td>65899627<br />65899367(FAX)</td> 73 </tr> 74 <tr> 75 <td>航交所办事处</td> 76 <td>55130093<br />63233775(FAX)</td> 77 </tr> 78 <tr> 79 <td>政务中心</td> 80 <td>65355597<br />65890958(FAX)</td> 81 </tr> 82 <tr> 83 <td>上海海事局政务中心<br />浦东分中心 </td> 84 <td>50151950<br />50151952(FAX)</td> 85 </tr> 86 <tr> 87 <td>第一执法大队</td> 88 <td>65892051</td> 89 </tr> 90 <tr> 91 <td>第二执法大队</td> 92 <td>55899652<br />55895608(FAX)</td> 93 </tr> 94 <tr> 95 <td>第三、第四执法大队</td> 96 <td>65894772</td> 97 </tr> 98 <tr> 99 <td>高桥石化签证点</td> 100 <td>58616257<br />58674012(FAX)</td> 101 </tr> 102 <tr> 103 <td>第二执法大队</td> 104 <td>55899652<br />55895608(FAX)</td> 105 </tr> 106 <tr> 107 <td>第三、第四执法大队</td> 108 <td>65894772</td> 109 </tr> 110 <tr> 111 <td>高桥石化签证点</td> 112 <td>58616257<br />58674012(FAX)</td> 113 </tr> 114 </tbody> 115 </table> 116 </body> 117 118 </html>
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
- 循序渐进VUE+Element 前端应用开发(5)--- 表格列表页面的查 2020-07-15
- 循序渐进VUE+Element 前端应用开发(5)--- 表格列表页面的查 2020-07-15
- 循序渐进VUE+Element 前端应用开发(5)--- 表格列表页面的查 2020-07-14
- 循序渐进VUE+Element 前端应用开发(5)--- 表格列表页面的查 2020-07-13
- 循序渐进VUE+Element 前端应用开发(5)--- 表格列表页面的查 2020-07-02
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash