原本的页面布局,希望分左、中、右三个区域,其中左、右区域分别定宽为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)又会过宽,导致屏幕底部出现水平滚动条。应该如何来解决?
答案:修改后的代码如下:
.........................................
..............................................阅读全文,请点击关于table里td的宽度问题
此文转载自:K.N.J's blog
欲知更多信息,请参考: