share555

 找回密码
 立即注册
搜索
热搜: 活动 交友 discuz
AmazingCounters.com
查看: 63|回复: 0

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

[复制链接]

393

主题

766

帖子

2172

积分

金牌会员

Rank: 6Rank: 6

积分
2172
发表于 2021-3-15 09:34:09 | 显示全部楼层 |阅读模式

正确的实现代码如下:

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

效果:

脚本之家-share555html table出现个人简历以及单位格宽度失效的题目办理(1)

实现关键:
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之前。

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

脚本之家-share555html table出现个人简历以及单位格宽度失效的题目办理(2)

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

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


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

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|Archiver|手机版|小黑屋|分享论坛

GMT+8, 2021-6-13 13:50 , Processed in 0.102963 second(s), 21 queries .

Powered by Discuz! X3.4

© 2001-2017 Comsenz Inc.

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