html table呈现个人简历以及单元格宽度失效的问题解决

这篇文章主要介绍了html table呈现个人简历以及单元格宽度失效的问题解决,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

正确的实现代码如下：

   个人简历  个人简历 个人资料
  姓名 婚姻 照片
 出 生 政治面貌 
 性 别 民 族 
 学 位 移动电话 
 专 业 电子邮件 
 地址:
 教育背景
 2012.9 - 2014.9 中国海洋大学本科
 特长及兴趣爱好
 篮球、足球、羽毛球、游泳、旅游
 计算机能力
 精通html div+css javascript jQuery php linux
 外语水平
 通过英语专业四六，能熟练进行听说读写译

个人简历
个人资料
姓名		婚姻	照片
出生		政治面貌
性别		民族
学位		移动电话
专业		电子邮件
地址:
教育背景
2012.9 - 2014.9	中国海洋大学本科
特长及兴趣爱好
篮球、足球、羽毛球、游泳、旅游
计算机能力
精通html div+css javascript jQuery php linux
外语水平
通过英语专业四六，能熟练进行听说读写译

效果：

在这里插入图片描述

实现关键：
1）利用table的colspan和rowspan属性，进行单元格的合并。
2）table中使用了colspan后会导致列宽度失效。
因为一般表格都会定义一个table-layout: fixed;防止td被连串字符撑开，但是如果首行有合并单元格的话 TD宽度定义就会失效。
最好的办法，在最上边加以下代码来控制td宽度

单位也可以用PX，把这段代码放在 tr之前，或者tbody之前。

如果删除上面的控制代码，呈现效果就会如下：

在这里插入图片描述