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实现3d旋转动画特效
Mar 10 HTML / CSS
全方位了解CSS3的Regions扩展
Aug 07 HTML / CSS
结合CSS3的新特性来总结垂直居中的实现方法
May 30 HTML / CSS
利用css3如何设置没有上下边的列表间隔线
Jul 03 HTML / CSS
基于ccs3的timeline时间线实现方法
Apr 30 HTML / CSS
在IE6系列等老式浏览器中使用HTML5的新标签实现方案
Dec 25 HTML / CSS
一款html5 canvas实现的图片玻璃碎片特效
Sep 11 HTML / CSS
用HTML5制作一个简单的弹力球游戏
May 12 HTML / CSS
HTML5本地存储之Web Storage详解
Jul 04 HTML / CSS
常用的HTML5列表标签
Jun 20 HTML / CSS
深入理解HTML5定时器requestAnimationFrame的使用
Dec 12 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
php支持断点续传、分块下载的类
2016/05/02 PHP
JS 判断undefined的实现代码
2009/11/26 Javascript
JavaScript 学习笔记二 字符串拼接
2010/03/28 Javascript
从jQuery.camelCase()学习string.replace() 函数学习
2011/09/13 Javascript
JavaScript中常用的六种互动方法示例
2015/03/13 Javascript
jQuery使用CSS()方法给指定元素同时设置多个样式
2015/03/26 Javascript
JavaScript 控制字体大小设置的方法
2016/11/23 Javascript
bootstrap模态框实现拖拽效果
2016/12/14 Javascript
Javascript设计模式之装饰者模式详解篇
2017/01/17 Javascript
Angularjs分页查询的实现
2017/02/24 Javascript
BootStrap中的Fontawesome 图标
2017/05/25 Javascript
JavaScript之json_动力节点Java学院整理
2017/06/29 Javascript
微信小程序支付之c#后台实现方法
2017/10/19 Javascript
Angular短信模板校验代码
2020/09/23 Javascript
vue+Element-ui实现登录注册表单
2020/11/17 Javascript
[13:38]2015国际邀请赛中国战队出征仪式
2015/05/29 DOTA
Python中的zip函数使用示例
2015/01/29 Python
Python判断两个list是否是父子集关系的实例
2018/05/04 Python
通过Py2exe将自己的python程序打包成.exe/.app的方法
2018/05/26 Python
Python数据持久化shelve模块用法分析
2018/06/29 Python
详解Python最长公共子串和最长公共子序列的实现
2018/07/07 Python
windows系统中Python多版本与jupyter notebook使用虚拟环境的过程
2019/05/15 Python
python数据处理之如何选取csv文件中某几行的数据
2019/09/02 Python
python 读取二进制 显示图片案例
2020/04/24 Python
使用CSS3制作一个简单的Chrome模拟器
2015/07/15 HTML / CSS
举例详解CSS3中的Transition
2015/07/15 HTML / CSS
佛罗里达州印第安河新鲜水果:Hale Groves
2017/02/20 全球购物
服装设计专业自荐书范文
2013/12/30 职场文书
村党支部换届选举方案
2014/05/02 职场文书
销售团队口号大全
2014/06/06 职场文书
教师反腐倡廉演讲稿
2014/09/03 职场文书
政府班子四风问题整改措施思想汇报
2014/10/08 职场文书
个人先进事迹材料
2014/12/29 职场文书
公安忠诚教育心得体会
2016/01/23 职场文书
工作转正自我鉴定范文
2019/06/21 职场文书
节约用水广告语60条
2019/11/14 职场文书