表格布局列嵌套表格时宽度没有变化

来源:4-1 课程总结

慕粉1056356323

2018-02-05 21:41:03

<!DOCTYPE html>

<html>

<head>

<title>表格布局1</title>

</head>

<body>

<table width="100%" bgcolor="gray">

<!-- 页头 -->

<tr height="80px" bgcolor="pink"><td></td></tr>

<!-- 顶部空白 -->

<tr height="10px"><td></td></tr>

<!-- 内容 -->

<tr><td>

<table align="center" width="1024px">

<tr>

<!-- 左侧内容 -->

<td width="240px" valign="top">

<table width="100%" bgcolor="white">

<tr><td height="60px" align="center">关于我们</td></tr>

<tr><td height="60px" align="center">关于我们</td></tr>

<tr><td height="60px" align="center">关于我们</td></tr>

<tr><td height="60px" align="center">关于我们</td></tr>

<tr><td height="60px" align="center">关于我们</td></tr>

<tr><td height="60px" align="center">关于我们</td></tr>

<tr><td height="60px" align="center">关于我们</td></tr>

</table>

</td>

<!-- 中间空白 -->

<td width="20px"></td>

<!-- 右侧内容 -->

<td width="764px" bgcolor="white">

<pre>

  什么是慕课(MOOC)

  源于国外,Massive(大规模)Open(开放)Online(在线)Course(课程)。

  慕课网是什么MOOC

  专注做好IT技能教育的MOOC,符合互联网发展潮流接地气儿的MOOC。

  我们免费,我们只教有用的,我们专心做教育。

  为什么做慕课网

  慕课网的小伙伴希望所有热爱互联网的同学能更加便捷的获取学习资源,

  用互联网思维改变我们的学习。

  我们提供最新的知识,帮你应对变化的世界!

  慕课网在做什么

  做更多实用的课程,做更好体验的产品,研究更牛的技术!

  慕课网的追求是什么

  让更多热爱互联网的同学来慕课网学习,

  多年以后,圈子里一批技术牛说:我在慕课网学习过,这就够了。

  慕课网有移动端吗

  有啊,手机端、iPad版请扫描下方二维码下载

  iPhone

  Android

  iPad

  慕课网的大佬是谁

  慕课网隶属于北京慕课科技中心(有限合伙),是一家从事互联网免费教学的网络教育公司。

  秉承“开拓、创新、公平、分享”的精神,将互联网特性全面的应用在教育领域,

  致力于为教育机构及求学者打造一站式互动在线教育品牌

  想及时沟通,请加慕粉QQ群,咱们当面聊!

  群7: 416465236

  Java群: 6200344

  Php群: 42125527

  web前端群3: 249860541

  安卓群: 232465453

  在校生群: 187845234

  什么是慕课(MOOC)

  源于国外,Massive(大规模)Open(开放)Online(在线)Course(课程)。

  慕课网是什么MOOC

  专注做好IT技能教育的MOOC,符合互联网发展潮流接地气儿的MOOC。

  我们免费,我们只教有用的,我们专心做教育。

  为什么做慕课网

  慕课网的小伙伴希望所有热爱互联网的同学能更加便捷的获取学习资源,

  用互联网思维改变我们的学习。

  我们提供最新的知识,帮你应对变化的世界!

  慕课网在做什么

  做更多实用的课程,做更好体验的产品,研究更牛的技术!

  慕课网的追求是什么

  让更多热爱互联网的同学来慕课网学习,

  多年以后,圈子里一批技术牛说:我在慕课网学习过,这就够了。

  慕课网有移动端吗

  有啊,手机端、iPad版请扫描下方二维码下载

  iPhone

  Android

  iPad

  慕课网的大佬是谁

  慕课网隶属于北京慕课科技中心(有限合伙),是一家从事互联网免费教学的网络教育公司。

  秉承“开拓、创新、公平、分享”的精神,将互联网特性全面的应用在教育领域,

  致力于为教育机构及求学者打造一站式互动在线教育品牌

  想及时沟通,请加慕粉QQ群,咱们当面聊!

  群7: 416465236

  Java群: 6200344

  Php群: 42125527

  web前端群3: 249860541

  安卓群: 232465453

  在校生群: 187845234

</pre>

</td>

</tr>

</table>

</td></tr>

<!-- 底部空白 -->

<tr height="10px"><td></td></tr>

<!-- 页尾 -->

<tr height="80px" bgcolor="pink"><td></td></tr>

</table>

</body>

</html>


写回答

6回答

慕粉1056356323

提问者

2018-02-06

我用的是QQ 浏览器运行的,更换个浏览器好了,这个小Bug 我想了好久,谢谢现在已经好了。
0

Miss路

2018-02-06

你在什么浏览器上测试的?老师这里测试是没有问题,建议你用谷歌和火狐进行测试。祝学习愉快!

0

慕粉1056356323

提问者

2018-02-06

图一是我代码运行的结果,是有问题的。http://img.mukewang.com/climg/5a7926a4000113c611280728.jpg

图二是最终我想要的样式http://img.mukewang.com/climg/5a7926a40001b1b316800712.jpg

请问我代码哪有问题那?

0

怎么都被占用了呢

2018-02-06

你是说这个嵌套的表格吗,

http://img.mukewang.com/climg/5a79248c00011dc707790300.jpg

经过测试,嵌套表格的宽度是可以随着单元格宽度变化的

0

慕粉1056356323

提问者

2018-02-06

你运行下,就知道我的bug 了。

0

怎么都被占用了呢

2018-02-06

你所说的宽度没有变化具体疑问是什么呢,能详细描述一下么

0

0 学习 · 36712 问题

查看课程