1.table实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格实现表头</title>
<style>
table{
width:100%;
height: 84px;
text-align: center;
}
</style>
</head>
<body>
<table cellpadding="0" cellspacing="0" border="1px solid #000" >
<tr>
<th colspan="20">任务完成情况汇总</th>
</tr>
<tr>
<td colspan="2" rowspan="3">工作完成情况</td>
<td colspan="2">今日新派</td>
<td colspan="8">今日完成</td>
<td colspan="8">执行之中</td>
</tr>
<tr>
<td>主管的</td>
<td>负责的</td>
<td colspan="4">主管的</td>
<td colspan="4">负责的</td>
<td colspan="4">主管的</td>
<td colspan="4">负责的</td>
</tr>
<tr>
<td>提前</td>
<td>正常</td>
<td>延期</td>
<td>小计</td>
<td>提前</td>
<td>正常</td>
<td>延期</td>
<td>小计</td>
<td>未审</td>
<td>正常</td>
<td>延期</td>
<td>小计</td>
<td>未审</td>
<td>正常</td>
<td>延期</td>
<td>小计</td>
</tr>
</table>
</body>
</html>2.div实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>div实现表格表头效果</title>
<style>
.head{
width:100%;
height: 84px;
font-size: 12px;
font-family: "微软雅黑";
text-align: center;
line-height: 28px;
}
.title,.head div{
border:1px solid #000;
box-sizing: border-box;
}
.fl_l{
float:left;
}
.in_block{
display: inline-block;
}
.md_box{
width:50%;
height:33.33333%;
}
.sm_box{
width: 12.5%;
height: 33.33333%;
}
</style>
</head>
<body>
<div class="title" style="border-bottom: none;text-align: center"><b>任务完成情况</b></div>
<div class="head">
<div class="fl_l in_block" style="width:10%;height:100%;border-right: none;line-height: 84px;">团队</div>
<div class="fl_l in_block " style="width:10%;height:100%; border: none;">
<div style="width:100%;height: 33.33333%;border-right: none;border-bottom: none;">今日新派</div>
<div class="fl_l in_block" style="width:50%;height: 66.66666%;border-right: none;line-height: 56px;">主管</div>
<div class="fl_l in_block" style="width:50%;height:66.66666%;border-right: none;line-height: 56px;">负责</div>
</div>
<div class="fl_l in_block" style="width:40%;height:100%;border:none;">
<div style="width:100%;height: 33.33333%;border-right:none;border-bottom: none;">今日完成</div>
<div class="fl_l in_block md_box" style="border-right:none;border-bottom: none;">主管</div>
<div class="fl_l in_block md_box" style="border-right:none;border-bottom: none;">负责</div>
<div class="fl_l in_block sm_box" style="border-right:none;">提前</div>
<div class="fl_l in_block sm_box" style="border-right:none;">延期</div>
<div class="fl_l in_block sm_box" style="border-right:none;">正常</div>
<div class="fl_l in_block sm_box" style="border-right:none;">小计</div>
<div class="fl_l in_block sm_box" style="border-right:none;">提前</div>
<div class="fl_l in_block sm_box" style="border-right:none;">延期</div>
<div class="fl_l in_block sm_box" style="border-right:none;">正常</div>
<div class="fl_l in_block sm_box" style="border-right:none;">小计</div>
</div>
<div class="fl_l in_block" style="width:40%;height:100%;border:none;">
<div style="width:100%;height: 33.33333%;border-bottom: none;">执行之中</div>
<div class="fl_l in_block md_box" style="border-right:none;border-bottom: none;">主管</div>
<div class="fl_l in_block md_box" style="border-bottom: none;">负责</div>
<div class="fl_l in_block sm_box" style="border-right:none;">未审</div>
<div class="fl_l in_block sm_box" style="border-right:none;">延期</div>
<div class="fl_l in_block sm_box" style="border-right:none;">正常</div>
<div class="fl_l in_block sm_box" style="border-right:none;">小计</div>
<div class="fl_l in_block sm_box" style="border-right:none;">未审</div>
<div class="fl_l in_block sm_box" style="border-right:none;">延期</div>
<div class="fl_l in_block sm_box" style="border-right:none;">正常</div>
<div class="fl_l in_block sm_box" >小计</div>
</div>
</div>
</body>
</html>