html中实现table跨行跨列

最新推荐文章于 2024-07-18 13:06:29 发布

爱体育的猿

最新推荐文章于 2024-07-18 13:06:29 发布

阅读量2.7k

点赞数

分类专栏：随笔文章标签： html 跨行跨列小方框+文本

本文链接：https://blog.csdn.net/qq_35511307/article/details/51892644

版权

本文介绍了一种解决HTML表格中复杂跨行跨列问题的方法，通过实例展示了如何创建包含小方框+文本的表格布局，并提供了详细的源代码示例，适合初学者参考。

摘要由CSDN通过智能技术生成

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

今天在公司做个打印需求时，被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