有间距的表格布局 table布局

发布时间:2017-7-1 11:38:31编辑:www.fx114.net 分享查询网我要评论
本篇文章主要介绍了"有间距的表格布局 table布局 ",主要涉及到有间距的表格布局 table布局 方面的内容,对于有间距的表格布局 table布局 感兴趣的同学可以参考一下。

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>


上一篇:IDEA快捷键
下一篇:react-native-picke Cannot read property '_init' of undefined

相关文章

相关评论

本站评论功能暂时取消,后续此功能例行通知。

一、不得利用本站危害国家安全、泄露国家秘密,不得侵犯国家社会集体的和公民的合法权益,不得利用本站制作、复制和传播不法有害信息!

二、互相尊重,对自己的言论和行为负责。

好贷网好贷款