html中实现table跨行跨列
来源:互联网 发布:阿里云电视软件 编辑:程序博客网 时间:2024/05/16 01:51
原创作品,请勿转载,谢谢合作啦~
今天在公司做个打印需求时,被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中实现table跨行跨列
- html table中嵌入checkbox实现全选
- HTML中单击Table表头实现排序
- HTML中实现table垂直居中
- html中嵌套php实现隐藏table中tr
- html中table
- 通过javascript实现html中table单元格的合并
- HTML中点击TABLE列头实现排序功能
- html table中td内容超出显示.怎么实现
- html Table实现表头固定
- html Table实现表头固定
- html中table边框细线
- html中table固定表头
- html中table的使用方法
- html中table的设计
- html中table退变
- html删除table中tr
- html中table导出Excel
- 对cell赋值 matlab
- 2016-7-12
- JAVA基础之JAVA概述
- 实例解读AndroidManifest.xml
- BZOJ2982——combination
- html中实现table跨行跨列
- css中绝对定位与相对定位的区别
- 在虚拟机上安装redhat linux
- Android开发——Activity生命周期
- spring核心概念
- 权限管理设计------之数据库设计
- SQL语句---nvl、ifnull 用法(将null转代为0)
- 吐槽吐槽烂代码
- Reverse Integer