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>