首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 HTML / CSS

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 table呈现个人简历以及单元格宽度失效的问题解决

- Author -

达内高级架构师

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

HTML / CSS 相关文章推荐
CSS教程：CSS3圆角属性
Apr 02 HTML / CSS
在css3中background-clip属性与background-origin属性的用法介绍
Nov 13 HTML / CSS
CSS3 @keyframes简单动画实现
Feb 24 HTML / CSS
CSS3制作轮播图的一种方法
Nov 11 HTML / CSS
CSS实现半透明边框与多重边框的场景分析
Nov 13 HTML / CSS
Grid 宫格常用布局的实现
Jan 10 HTML / CSS
html5使用canvas实现图片下载功能的示例代码
Aug 26 HTML / CSS
IE9下html5初试小刀
Sep 21 HTML / CSS
HTML5 Canvas的性能提高技巧经验分享
Jul 02 HTML / CSS
Html+Css+Jquery实现左侧滑动拉伸导航菜单栏的示例代码
Mar 17 HTML / CSS
amazeui时间组件的实现示例
Aug 18 HTML / CSS
HTML5基础学习之文本标签控制
Mar 25 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
capture(1) MybatisPlus(2) uniapp(4) tabBar(1) 数据重复(1) SpringBoot(22) self(1) element-china-area-data(1) Navigator(1) Flutter(2)
You might like
5.PHP的其他功能
2006/10/09 PHP
IIS php环境配置PHP5 MySQL5 ZendOptimizer phpmyadmin安装与配置
2008/11/18 PHP
PHP比你想象的好得多
2014/11/27 PHP
PHP简单实现无限级分类的方法
2016/05/13 PHP
php fseek函数读取大文件两种方法
2016/10/12 PHP
Laravel框架路由设置与使用示例
2018/06/12 PHP
从JavaScript的函数重名看其初始化方式
2007/03/08 Javascript
基于JQuery的抓取博客园首页RSS的代码
2011/12/01 Javascript
Javascript的闭包详解
2014/12/26 Javascript
详细解读JavaScript编程中的Promise使用
2015/07/27 Javascript
点评js异步加载的4种方式
2015/12/22 Javascript
JavaScript小技巧整理篇(非常全)
2016/01/26 Javascript
分离与继承的思想实现图片上传后的预览功能：ImageUploadView
2016/04/07 Javascript
Node.js+Express配置入门教程详解
2016/05/19 Javascript
js判断输入字符串是否为空、空格、null的方法总结
2016/06/14 Javascript
jQuery弹出窗口简单实现代码
2017/03/09 Javascript
vue.js 左侧二级菜单显示与隐藏切换的实例代码
2017/05/23 Javascript
nodejs实现截取上传视频中一帧作为预览图片
2017/12/10 NodeJs
Vuex 在Vue 组件中获得Vuex 状态state的方法
2018/08/27 Javascript
JS中的算法与数据结构之字典(Dictionary)实例详解
2019/08/20 Javascript
Bootstrap实现模态框效果
2019/09/30 Javascript
JS实现点餐自动选择框(案例分析)
2019/12/10 Javascript
Vue实现简单购物车功能
2020/12/13 Vue.js
python发送HTTP请求的方法小结
2015/07/08 Python
解决Scrapy安装错误:Microsoft Visual C++ 14.0 is required...
2017/10/01 Python
Python通用函数实现数组计算的方法
2019/06/13 Python
基于Django的乐观锁与悲观锁解决订单并发问题详解
2019/07/31 Python
Python单元测试工具doctest和unittest使用解析
2019/09/02 Python
在python中使用pymysql往mysql数据库中插入(insert)数据实例
2020/03/02 Python
Python unittest单元测试openpyxl实现过程解析
2020/05/27 Python
Python实现将元组中的元素作为参数传入函数的操作
2020/06/05 Python
详解Python中openpyxl模块基本用法
2021/02/23 Python
如何让pre和textarea等HTML元素去掉滚动条自动换行自适应文本内容高度
2019/08/01 HTML / CSS
结对共建协议书
2014/08/20 职场文书
四风个人对照检查材料思想汇报
2014/09/25 职场文书
教师辞职书范文
2015/02/26 职场文书