正文
有间距的表格布局 table布局
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
1、先看有间距的布局效果：
2、少说多做，直接看代码（代码中有注释）
<!DOCTYPE html>
<html lang="zh"> <head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>有间距的表格布局</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
} table {
width: 500px;
margin-top: 30px;
border-collapse: separate;
/*关键设置：间距5px*/
border-spacing: 5px;
/*均匀分布效果*/
table-layout: fixed;
} table th {
height: 44px;
font-size: 18px;
color: #fff;
text-align: center;
background-color: #1262a2;
} table td {
height: 44px;
font-size: 16px;
color: #000;
text-align: center;
background-color: #e5e5e5;
}
</style>
</head> <body>
<table> <thead>
<tr>
<th>部门</th>
<th>联系方式</th>
</tr>
</thead>
<tbody>
<tr> <td>综合办公室</td><br />
<td>65892365<br />35093269(FAX)</td>
</tr>
<tr> <td>党群工作部</td>
<td>65895682</td>
</tr>
<tr>
<td>财务会计处</td>
<td>55216949</td>
</tr>
<tr>
<td>业务监管处</td>
<td>65896474</td>
</tr>
<tr>
<td>指挥中心</td>
<td>65899627<br />65899367(FAX)</td>
</tr>
<tr>
<td>航交所办事处</td>
<td>55130093<br />63233775(FAX)</td>
</tr>
<tr>
<td>政务中心</td>
<td>65355597<br />65890958(FAX)</td>
</tr>
<tr>
<td>上海海事局政务中心<br />浦东分中心 </td>
<td>50151950<br />50151952(FAX)</td>
</tr>
<tr>
<td>第一执法大队</td>
<td>65892051</td>
</tr>
<tr>
<td>第二执法大队</td>
<td>55899652<br />55895608(FAX)</td>
</tr>
<tr>
<td>第三、第四执法大队</td>
<td>65894772</td>
</tr>
<tr>
<td>高桥石化签证点</td>
<td>58616257<br />58674012(FAX)</td>
</tr>
<tr>
<td>第二执法大队</td>
<td>55899652<br />55895608(FAX)</td>
</tr>
<tr>
<td>第三、第四执法大队</td>
<td>65894772</td>
</tr>
<tr>
<td>高桥石化签证点</td>
<td>58616257<br />58674012(FAX)</td>
</tr>
</tbody>
</table>
</body> </html>
