您的位置：首页 > Web前端 > HTML

html中实现table跨行跨列

2016-07-12 21:16 369 查看

原创作品，请勿转载，谢谢合作啦~

今天在公司做个打印需求时，被table难住了，网上给的跨行跨列没有能解决我的问题的，于是乎想给基础较差的同行说道说道。

普通的跨行跨列在这里我就不说了，网上一大片！！！这里要给大家举个相对来讲复杂的例子。如下图所示：

我们由图不难看出，出现的跨列比较复杂。在这里我把本表分成了14列（table中，设置不同的列宽，自动取大的列宽）。例：表第一行中每个方框分别占两列、六列、两列、4列；第二行每个方框分别占1、1、1、1、3、1、1、2、1、1、1列（领会其中的精神）。然后先不设置每列的宽度，把跨列、跨行先实现。实现完成后，选取表格中的几行，分别对其进行宽度设置，本例分别对表格中的第2、8、11行中的每一列进行了宽的设置，最终得以实现。

源码如下：

<!DOCTYPE HTML>

<html>

<body>

<h3 align="center">某公司困难职工档案表</h3>

<hr width=45% size=5 align="center" noshade>

<table border="1" cellspacing="0" align="center">

<tr>

<td colspan="2" style="text-align: center;">职工编号</td>

<td colspan="6"></td>

<td colspan="2" style="text-align: center;">困难类别</td>

<td colspan="4"></td>

</tr>

<tr style="text-align: center;">

<td width="60" >姓名</td>

<td width="60" >民族</td>

<td width="50" >性别</td>

<td width="70">政治面貌</td>

<td colspan="3" width="210" >身份证号</td>

<td width="110" >出生日期</td>

<td width="60" >身份</td>

<td colspan="2" width="130" >健康状况</td>

<td width="80">残疾类别</td>

<td width="80">残疾等级</td>

<td width="80">是否工伤</td>

</tr>

<tr>

<td height="30"></td>

<td></td>

<td></td>

<td></td>

<td colspan="3"></td>

<td></td>

<td></td>

<td colspan="2"></td>

<td></td>

<td></td>

<td></td>

</tr>

<tr style="text-align: center;">

<td colspan="2">住房类型</td>

<td colspan="3">建筑面积</td>

<td colspan="2">联系电话</td>

<td>邮政编码</td>

<td colspan="2">入场时间</td>

<td>工作年限</td>

<td>居退时间</td>

<td>婚姻状况</td>

<td>劳模类型</td>

</tr>

<tr>

<td colspan="2" height="30"></td>

<td colspan="3"></td>

<td colspan="2"></td>

<td></td>

<td colspan="2"></td>

<td></td>

<td></td>

<td></td>

<td></td>

</tr>

<tr style="text-align: center;">

<td style="font-size: 15px;">户口类型</td>

<td colspan="4">家庭住址</td>

<td colspan="3">户口所在地行政区划</td>

<td colspan="2">所属模块</td>

<td colspan="4">工作单位</td>

</tr>

<tr>

<td></td>

<td colspan="4" height="30"></td>

<td colspan="3"></td>

<td colspan="2"></td>

<td colspan="4"></td>

</tr>

<tr style="text-align: center;">

<td colspan="2" width="120">本人月平均收入</td>

<td colspan="2" width="120">家庭年度总收入</td>

<td width="70">家庭人口</td>

<td width="70">就业人员</td>

<td width="70">年自负额</td>

<td width="110" style="font-size: 15px;">家庭年人均收入</td>

<td colspan="3" width="190">医保号</td>

<td colspan="3" width="240"></td>

</tr>

<tr>

<td colspan="2" height="30"></td>

<td colspan="2"></td>

<td></td>

<td></td>

<td></td>

<td></td>

<td colspan="3"></td>

<td colspan="3"></td>

</tr>

<tr style="text-align: center;">

<td colspan="2" height="80px">致困原因</td>

<td colspan="12">

<div style="margin-left:100px;">

<div style="float: left;width:10px; height:10px; border:1px solid #222;margin-top:5px; margin-right:10px;"></div>

<div style="float: left; margin-right: 20px;">本人大病</div>
<div style="float: left;width:10px; height:10px; border:1px solid #222;margin-top:5px; margin-right:10px;"></div>

<div style="float: left; margin-right: 20px;">供养直系亲属大病</div>
<div style="float: left;width:10px; height:10px; border:1px solid #222;margin-top:5px; margin-right:10px;"></div>

<div style="float: left; margin-right: 20px;">重大事故灾害</div>
<div style="float: left;width:10px; height:10px; border:1px solid #222;margin-top:5px; margin-right:10px;"></div>

<div style="float: left; margin-right: 20px;">子女上大学</div>

</div>
<br>
<div style="margin-left:100px;">

<div style="float: left;width:10px; height:10px; border:1px solid #222;margin-top:5px; margin-right:10px;"></div>

<div style="float: left; margin-right: 20px;">本人残疾</div>
<div style="float: left;width:10px; height:10px; border:1px solid #222;margin-top:5px; margin-right:10px;"></div>

<div style="float: left; margin-right: 100px;">收入低</div>
<div style="float: left;width:10px; height:10px; border:1px solid #222;margin-top:5px; margin-right:10px;"></div>

<div style="float: left; margin-right: 20px;">家属下岗失业</div>
<div style="float: left;width:10px; height:10px; border:1px solid #222;margin-top:5px; margin-right:10px;"></div>

<div style="float: left; margin-right: 20px;">家属残疾</div>

</div>

</td>

</tr>

<tr style="text-align: center;">

<td rowspan="7" width="60">家<br>庭<br>成<br>员<br>关<br>系</td>

<td width="60">姓名</td>

<td width="50">关系</td>

<td width="70">性别</td>

<td width="70">政治面貌</td>

<td width="70">出生日期</td>

<td width="180" colspan="2">身份证号</td>

<td width="110" colspan="2">健康状况</td>

<td width="80">月收入</td>

<td width="80">身份</td>

<td width="160" colspan="2">单位或学校</td>

</tr>

<tr>

<td height="25"></td>

<td></td>

<td></td>

<td></td>

<td></td>

<td colspan="2"></td>

<td colspan="2"></td>

<td></td>

<td></td>

<td colspan="2"></td>

</tr>

<tr>

<td height="25"></td>

<td></td>

<td></td>

<td></td>

<td></td>

<td colspan="2"></td>

<td colspan="2"></td>

<td></td>

<td></td>

<td colspan="2"></td>

</tr>

<tr>

<td height="25"></td>

<td></td>

<td></td>

<td></td>

<td></td>

<td colspan="2"></td>

<td colspan="2"></td>

<td></td>

<td></td>

<td colspan="2"></td>

</tr>

<tr>

<td height="25"></td>

<td></td>

<td></td>

<td></td>

<td></td>

<td colspan="2"></td>

<td colspan="2"></td>

<td></td>

<td></td>

<td colspan="2"></td>

</tr>

<tr>

<td height="25"></td>

<td></td>

<td></td>

<td></td>

<td></td>

<td colspan="2"></td>

<td colspan="2"></td>

<td></td>

<td></td>

<td colspan="2"></td>

</tr>

<tr>

<td height="25"></td>

<td></td>

<td></td>

<td></td>

<td></td>

<td colspan="2"></td>

<td colspan="2"></td>

<td></td>

<td></td>

<td colspan="2"></td>

</tr>

<tr style="text-align: center;">

<td rowspan="4" style="vertical-align:middle;">所<br>附<br>附<br>件</td>

<td colspan="2">附件类型</td>

<td colspan="11">附件文件</td>

</tr>

<tr>

<td colspan="2" height="25"></td>

<td colspan="11"></td>

</tr>

<tr>

<td colspan="2" height="25"></td>

<td colspan="11"></td>

</tr>

<tr>

<td colspan="2" height="25"></td>

<td colspan="11"></td>

</tr>

</tr>

<tr style="text-align: center;">

<td>备注</td>

<td colspan="13"></td>

</tr>

</table>

</body>

</html>

这里不但有跨行、跨列，还涉及到了表格中常见的“小方框+文本”的格式，希望能对刚入行的“菜鸟”们有所帮助。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： html 跨行跨列小方框+文本

相关文章推荐

新的分享

章节导航