您现在的位置是：网站首页> 编程资料编程资料

html table呈现个人简历以及单元格宽度失效的问题解决html解决table设置宽度无效的问题HTML页面自适应宽度的table(表格)固定 table宽度 table-layout: fixed表格设置table-layout:fixed后对单元格宽度设置无效html中table为每个单元格设置不同颜色和宽度设置table中的宽度不随文字改变让其固定td 内容自动换行 table表格td设置宽度后文字太多自动换行

2021-08-30 1972人已围观

简介这篇文章主要介绍了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之前。

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

在这里插入图片描述