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


Posted in HTML / CSS onJanuary 22, 2021

正确的实现代码如下:

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

效果:

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

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

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

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

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

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

单元格的宽度变得不可预测。

到此这篇关于html table呈现个人简历以及单元格宽度失效的问题解决的文章就介绍到这了,更多相关html table单元格宽度失效内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

HTML / CSS 相关文章推荐
css3 border-image使用说明
Jun 23 HTML / CSS
利用CSS3的transition属性实现滑动效果
Aug 05 HTML / CSS
利用CSS3实现开门效果实例源码
Aug 22 HTML / CSS
IE8下CSS3选择器nth-child() 不兼容问题的解决方法
Nov 16 HTML / CSS
HTML5中视频音频的使用详解
Jul 07 HTML / CSS
关于前端上传文件全面基础扫盲贴(入门)
Aug 01 HTML / CSS
详解android与HTML混合开发总结
Jun 06 HTML / CSS
详解三种方式实现平滑滚动页面到顶部的功能
Apr 23 HTML / CSS
html5 canvas实现给图片添加平铺水印
Aug 20 HTML / CSS
关于canvas.toDataURL 在iOS运行失败的问题解决
Sep 16 HTML / CSS
Html5页面点击遮罩层背景关闭遮罩层
Nov 30 HTML / CSS
HTML静态页面获取url参数和UserAgent的实现
Aug 05 HTML / CSS
浅析HTML5页面元素及属性
Jan 20 #HTML / CSS
详解如何解决H5开发使用wx.hideMenuItems无效果不生效
Jan 20 #HTML / CSS
HTML5在微信内置浏览器下右上角菜单的调整字体导致页面显示错乱的问题
Jan 19 #HTML / CSS
HTML5 drag和drop具体使用详解
Jan 18 #HTML / CSS
Html5 new XMLHttpRequest()监听附件上传进度
Jan 14 #HTML / CSS
HTML5 canvas实现的静态循环滚动播放弹幕
Jan 05 #HTML / CSS
Html5+CSS3+EL表达式问题小结
Dec 19 #HTML / CSS
You might like
使用sockets:从新闻组中获取文章(三)
2006/10/09 PHP
基于curl数据采集之单页面并行采集函数get_htmls的使用
2013/04/28 PHP
ThinkPHP采用实现三级循环代码实例
2014/07/18 PHP
php getcwd与dirname(__FILE__)区别详解
2016/09/24 PHP
PHP+ajax实现二级联动菜单功能示例
2018/08/10 PHP
javascript URL编码和解码使用说明
2010/04/12 Javascript
js 获取坐标 通过JS得到当前焦点(鼠标)的坐标属性
2013/01/04 Javascript
JavaScript实现带标题的图片轮播特效
2015/05/20 Javascript
JavaScript采用递归算法计算阶乘实例
2015/08/04 Javascript
JavaScript编写一个贪吃蛇游戏
2017/03/09 Javascript
JS获取鼠标坐标并且根据鼠标位置不同弹出不同内容
2017/06/12 Javascript
JS图片预加载插件详解
2017/06/21 Javascript
Angular使用过滤器uppercase/lowercase实现字母大小写转换功能示例
2018/03/27 Javascript
uni-app使用微信小程序云函数的步骤示例
2020/05/22 Javascript
[02:38]DOTA2亚洲邀请赛 IG战队巡礼
2015/02/03 DOTA
Python实现115网盘自动下载的方法
2014/09/30 Python
Python格式化压缩后的JS文件的方法
2015/03/05 Python
python中enumerate函数遍历元素用法分析
2016/03/11 Python
你应该知道的python列表去重方法
2017/01/17 Python
python基本语法练习实例
2017/09/19 Python
Python实现查找二叉搜索树第k大的节点功能示例
2019/01/24 Python
浅谈Python中的可迭代对象、迭代器、For循环工作机制、生成器
2019/03/11 Python
python中的print()输出
2019/04/12 Python
纯CSS3+DIV实现小三角形边框效果的示例代码
2020/08/03 HTML / CSS
Priority Pass机场贵宾室会籍计划:全球超过1200间机场贵宾室
2018/08/26 全球购物
快时尚眼镜品牌,全国连锁眼镜店:LOHO眼镜生活
2018/10/08 全球购物
奥地利购买珠宝和手表网站:ELLA JUWELEN
2019/09/03 全球购物
高中自我评价范文
2014/01/27 职场文书
情况说明书格式范文
2014/05/06 职场文书
英文推荐信格式范文
2014/05/09 职场文书
干部鉴定材料
2014/05/18 职场文书
小学数学课题方案
2014/06/15 职场文书
思想纪律作风整顿剖析材料
2014/10/11 职场文书
2015年英语教学工作总结
2015/05/25 职场文书
详解MySQL的半同步
2021/04/22 MySQL
MySQL为数据表建立索引的原则详解
2022/03/03 MySQL