这篇文章将为大家详细讲解有关html中个人简历单元格宽度失效怎么办,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。

正确的实现代码如下:

<!doctypehtml><htmllang="zh"><head><metacharset="UTF-8"><title>个人简历</title></head><body><tablewidth="800"border="1"align="center"cellpadding="10"cellspacing="0"><caption><h4>个人简历</h4></caption><tr><tdcolspan="5"bgcolor="#9FCDEA">个人资料</td></tr><colgroup><colwidth=20%></col><colwidth=20%></col><colwidth=20%></col><colwidth=20%></col><colwidth=20%></col></colgroup><tr><tdalign="center">姓名</td><td></td><tdalign="center">婚姻</td><td></td><tdrowspan="5"align="center"valign="middle">照片</td></tr><tr><tdalign="center">出生</td><td></td><tdalign="center">政治面貌</td><td></td></tr><tr><tdalign="center">性别</td><td></td><tdalign="center">民族</td><td></td></tr><tr><tdalign="center">学位</td><td></td><tdalign="center">移动电话</td><td></td></tr><tr><tdalign="center">专业</td><td></td><tdalign="center">电子邮件</td><td></td></tr><tr><tdcolspan="5">地址:</td></tr><tr><tdcolspan="5"bgcolor="#9FCDEA">教育背景</td></tr><tr><tdcolspan="2">2012.9-2014.9</td><tdcolspan="3">中国海洋大学本科</td></tr><tr><tdcolspan="5"bgcolor="#9FCDEA">特长及兴趣爱好</td></tr><tr><tdcolspan="5">篮球、足球、羽毛球、游泳、旅游</td></tr><tr><tdcolspan="5"bgcolor="#9FCDEA">计算机能力</td></tr><tr><tdcolspan="5">精通htmldiv+cssjavascriptjQueryphplinux</td></tr><tr><tdcolspan="5"bgcolor="#9FCDEA">外语水平</td></tr><tr><tdcolspan="5">通过英语专业四六,能熟练进行听说读写译</td></tr></table></body></html>

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

<colgroup><colwidth=20%></col><colwidth=20%></col><colwidth=20%></col><colwidth=20%></col><colwidth=20%></col></colgroup>

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

关于“html中个人简历单元格宽度失效怎么办”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看到。