1. 爱易网页
  2. HTML教程
  3. html页面table里的td宽度有关问题

html页面table里的td宽度有关问题

日期：2014-05-17　 浏览次数：20835 次

求助html页面table里的td宽度问题
大家好，我设计html页面中遇到table里td宽度问题，请教是否有解决办法。

我的页面布局，希望分左、中、右三个区域，其中左、右区域分别定宽为190、140，中间td区域希望充分利用屏幕剩余宽度，如下code运行良好：
<html>
 <body>
  <table WIDTH="100%" align="center" BORDER="1" CELLSPACING="0" CELLPADDING="0">
  <tr>
  <td width="190"><img alt="左侧区，定宽190" src="" width="190" height="100"></td>
  <td>中间内容区，希望充分利用屏幕剩余宽度。</td>
  <td width="140"><img alt="右侧区，定宽140" src="" width="140" height="100"></td>
  </tr>
  </table>
 </body>
</html>

后来，公司要求上面加一行广告，code如下：
<html>
 <body>
  <table WIDTH="100%" align="center" BORDER="1" CELLSPACING="0" CELLPADDING="0">
  <tr style="background:url(back.jpg)">
  <td colspan=3 align=center>
  <img alt="顶部广告区，固定980*200" src="" width="980" height="200">
  </td>
  </tr>
  <tr>
  <td width="190"><img alt="左侧区，定宽190" src="" width="190" height="100"></td>
  <td>中间内容区，希望充分利用屏幕剩余宽度。</td>
  <td width="140"><img alt="右侧区，定宽140" src="" width="140" height="100"></td>
  </tr>
  </table>
 </body>
</html>

此时问题出来了，第二行的中间td区域的宽度始终无法充分利用屏幕剩余宽度，看起来就好像是3个td平均分配宽度。曾尝试将中间td设置属性width="100%"，但在较小屏幕下（如1024*768）又会过宽，导致屏幕底部出现水平滚动条。

请高手看看有没解决办法，谢谢！


------解决方案--------------------
<html>
 <body>
<table WIDTH="100%" align="center" BORDER="1" CELLSPACING="0" CELLPADDING="0">
<tr>
<td >
<table WIDTH="100%">
<tr style="background:url(back.jpg)">
<td align=center>
<img alt="顶部广告区，固定980*200" src="" width="980" height="200">
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td><table WIDTH="100%">
<tr>
<td width="190"><img alt="左侧区，定宽190" src="" width="190" height="100"></td>
<td>中间内容区，希望充分利用屏幕剩余宽度。</td>
<td width="140"><img alt="右侧区，定宽140" src="" width="140" height="100"></td>
</tr>
</table>
</td>
</tr>
</table>
 </body>
</html>

相关资料更多>

  1. html旋钮button加超链接
  2. css的rowspan,该如何处理
  3. HTML5基础教程：mark标签运用实例
  4. 加了!DOCTYPE飘浮无效果，这是为何，如何避免
  5. 关于HTML图片显示的有关问题
  6. html图片覆盖,该如何解决
  7. CSS中文字如何斜体
  8. CSS3中的圆角成效小结
  9. 页面上传时的等待有关问题