首页 > > 网页制作 > css >

有间距的表格布局 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>