html页面table里的td宽度有关问题
日期：2014-05-17 浏览次数：20812 次
求助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>
大家好，我设计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>
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
