• 设为首页
  • 收藏本站
  • 积分充值
  • VIP赞助
  • 手机版
  • 微博
  • 微信
    微信公众号 添加方式：
    1:搜索微信号（888888）
    2:扫描左侧二维码
  • 登录 立即注册
    • 切换风格
    快捷导航
    福建二哥 › 门户 › 查看主题

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

    发布者: 404号房间 | 发布时间: 2025-6-16 12:26| 查看数: 49| 评论数: 0|帖子模式

    正确的实现代码如下：
    1. <!doctype html>
    2. <html lang="zh">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>个人简历</title>
    6. </head>
    7. <body>
    8.     <table width="800" border="1" align="center" cellpadding="10" cellspacing="0">
    9.         <caption><h3>个人简历</h3></caption>
    10.         <tr>
    11.             <td colspan="5" bgcolor="#9FCDEA">个人资料</td>
    12.         </tr>
    13.                 <colgroup>
    14.                        <col width=20%></col>
    15.                        <col width=20%></col>
    16.                        <col width=20%></col>
    17.                            <col width=20%></col>
    18.                            <col width=20%></col>
    19.                 </colgroup>
    20.         <tr>
    21.             <td align="center">姓名</td>
    22.                         <td></td>
    23.             <td align="center">婚姻</td>
    24.                         <td></td>
    25.             <td rowspan="5"  align="center" valign="middle">照片</td>
    26.         </tr>
    27.                
    28.         <tr>
    29.             <td align="center">出 生</td>
    30.                         <td></td>
    31.             <td align="center">政治面貌</td>
    32.                         <td></td>
    33.         </tr>
    34.         <tr>
    35.             <td align="center">性 别</td>
    36.                         <td></td>
    37.             <td align="center">民 族</td>
    38.                         <td></td>
    39.         </tr>
    40.         <tr>
    41.             <td align="center">学 位</td>
    42.                         <td></td>
    43.             <td align="center">移动电话</td>
    44.                         <td></td>
    45.         </tr>
    46.         <tr>
    47.             <td align="center">专 业</td>
    48.                         <td></td>
    49.             <td align="center">电子邮件</td>
    50.                         <td></td>
    51.         </tr>
    52.         <tr>
    53.             <td colspan="5">地址:</td>
    54.         </tr>
    55.         <tr>
    56.             <td colspan="5" bgcolor="#9FCDEA">教育背景</td>
    57.         </tr>
    58.         <tr>
    59.             <td colspan="2">2012.9 - 2014.9</td>
    60.             <td colspan="3">中国海洋大学本科</td>
    61.         </tr>
    62.         <tr>
    63.             <td colspan="5" bgcolor="#9FCDEA">特长及兴趣爱好</td>
    64.         </tr>
    65.         <tr>
    66.             <td colspan="5">篮球、足球、羽毛球、游泳、旅游</td>
    67.         </tr>
    68.         <tr>
    69.             <td colspan="5" bgcolor="#9FCDEA">计算机能力</td>
    70.         </tr>
    71.         <tr>
    72.             <td colspan="5">精通html div+css javascript jQuery php linux</td>
    73.         </tr>
    74.         <tr>
    75.             <td colspan="5" bgcolor="#9FCDEA">外语水平</td>
    76.         </tr>
    77.         <tr>
    78.             <td colspan="5">通过英语专业四六，能熟练进行听说读写译</td>
    79.         </tr>
    80.     </table>
    81. </body>
    82. </html>
    复制代码
    效果：

    实现关键：
    1）利用table的colspan和rowspan属性，进行单元格的合并。
    2）table中使用了colspan后会导致列宽度失效。
    因为一般表格都会定义一个table-layout: fixed;防止td被连串字符撑开，但是如果首行有合并单元格的话 TD宽度定义就会失效。
    最好的办法，在最上边加以下代码来控制td宽度
    1. <colgroup>
    2.        <col width=20%></col>
    3.        <col width=20%></col>
    4.        <col width=20%></col>
    5.            <col width=20%></col>
    6.            <col width=20%></col>
    7. </colgroup>
    复制代码
    单位也可以用PX，把这段代码放在 tr之前，或者tbody之前。
    如果删除上面的控制代码，呈现效果就会如下：

    单元格的宽度变得不可预测。
    到此这篇关于html table呈现个人简历以及单元格宽度失效的问题解决的文章就介绍到这了,更多相关html table单元格宽度失效内容请搜索脚本之家以前的文章或继续浏览下面的相关文章，希望大家以后多多支持脚本之家！

    来源：https://www.jb51.net/html5/761827.html
    免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！

    本帖子中包含更多资源

    您需要 登录 才可以下载或查看，没有账号？立即注册

    ×

    最新评论

    浏览过的版块

    新人须知

    常见问题

    维权申诉

    关注微博

    扫描微信

    关于合作

    通讯联系

    QQ Archiver 手机版 小黑屋 福建二哥 ( 闽ICP备2022004717号|闽公网安备35052402000345号 )

    Powered by Discuz! X3.5 © 2001-2023

    快速回复 返回顶部 返回列表