脚本之家 服务器常用软件
快捷导航
您的位置：主页 > 网页制作 > html5 > html table单元格宽度失效

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

  发布时间：2021-01-22 11:51:33   作者：达内高级架构师   我要评论
这篇文章主要介绍了html table呈现个人简历以及单元格宽度失效的问题解决,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

正确的实现代码如下：

<!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>

效果：

在这里插入图片描述

实现关键：
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设置宽度无效的问题，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学
    2020-07-30

  • HTML页面自适应宽度的table(表格)

    这篇文章主要介绍了HTML页面自适应宽度的table(表格),文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习
    2020-06-16

  • 固定 table宽度 table-layout: fixed

    如果单元格中的文本超过宽度限制，就会自动换行，高度自动增高，导致整个表格的样式参差不齐，不过可以通过禁用文本换行来解决这个问题
    2014-05-15

  • 表格设置table-layout:fixed后对单元格宽度设置无效

    在对设置表格设置table-layer:fixed样式后，发现表格中有一行合并过，其它没有合并的行的列宽会平均化，对列宽的设置会失效，下面有详细的解决方法，大家可以学习学习
    2014-04-14

  • html中table为每个单元格设置不同颜色和宽度

    最好不要在table里面直接设置宽度，高度等，在style里面添加设置，就不会出现无效问题，代码直接拷贝到body中间即可使用，下面有个示例，大家可以参考下
    2014-04-11

  • 设置table中的宽度不随文字改变让其固定

    页面中table宽度设置width之后，宽度仍然不是固定的，文字太长后不换行，下面有个不错的方法可以有效解决这个问题
    2014-02-17

  • td 内容自动换行 table表格td设置宽度后文字太多自动换行

    table表格td设置宽度后文字太多导致自动换行，这是一个很常见的问题,或许很多的网友已经有了好的解决方法,如果依然有童鞋们不会的，可以参考下本文，可能会有意外的收获
    2022-12-16

最新评论

关注微信公众号

扫一扫