colspan是横向合并;rowspan是纵向合并
css
*{
padding:0;
margin:0;
}
ul li{
list-style: none;
}
.table_wrap {
width: 1000px;
height: 600px;
margin: 100px auto;
background: skyblue;
}
table{
width: 100%;
height: 100%;
/* border:1px solid #999; */
text-align: center;
box-sizing: border-box;
border-spacing: 0;
border-collapse:collapse
}
.text_left{
text-align: left;
text-indent: 20px;
}
table td{
border: 1px solid #000;
}
.img_list {
width: 230px;
text-align: center;
margin:0 auto;
zoom:1;
}
.img_list::after{
content: "";
display: block;
height: 0;
clear:both;
visibility: hidden;
}
.img_list li{
float: left;
margin:0 10px;
}
.img_list li img{
display: inline-block;
}
html:
<div class="table_wrap">
<table>
<tr>
<td colspan="4">轿厢式电梯风险告知卡</td>
</tr>
<tr>
<td class="text_left" colspan="4">企业名称:凤凰城</td>
</tr>
<tr>
<td>风险点名称</td>
<td>电梯轿厢</td>
<td rowspan="2">主要危险概述</td>
<td rowspan="2">触电、跌落、机械伤害、其他伤害</td>
</tr>
<tr>
<td>风险等级</td>
<td>三级</td>
</tr>
<tr>
<td colspan="2">安全标志</td>
<td rowspan="2">主要风险控制措施</td>
<td rowspan="2">
<ul>
<li>1.做好电梯安全技术档案</li>
<li>2.做好电梯安全技术档案</li>
<li>3.做好电梯安全技术档案</li>
<li>4.做好电梯安全技术档案</li>
<li>5.做好电梯安全技术档案</li>
<li>6.做好电梯安全技术档案</li>
</ul>
</td>
</tr>
<tr>
<td colspan="2">
<ul class="img_list">
<li><img src="./img/tip.png" alt=""></li>
<li><img src="./img/tip.png" alt=""></li>
<li><img src="./img/tip.png" alt=""></li>
<li><img src="./img/tip.png" alt=""></li>
</ul>
</td>
</tr>
<tr>
<td>责任单位</td>
<td>工程部</td>
<td>主要事故类型</td>
<td>触电、跌落、机械伤害、其他伤害</td>
</tr>
<tr>
<td>责任人联系电话</td>
<td>18863148683</td>
<td>应急处置措施</td>
<td>
<ul>
<li>1.做好电梯安全技术档案</li>
<li>1.做好电梯安全技术档案</li>
<li>1.做好电梯安全技术档案</li>
</ul>
</td>
</tr>
</table>
</div>