I have a table that has worked correctly for many years, but recently the table widths have gone slightly haywire. It’s an old HTML site I maintain but didn’t write (it should be rewritten in CSS) but the owner doesn’t want to do it yet and it’s a very large site.
No changes were made to the table structure, yet the width=x % is no longer working correctly on part of it. I know the table is messy and overly complex
I’ve stared at this and I know I’m missing something easy. There are some errors in the table, but they have not prevented any rendering engine from displaying it properly until recently (client noticed it a few days ago).
The exact problem is that a nested table (see *problem below) is not allocating space on a 25%, x%, 25% basis. The x% is slightly under 50%, but the two outer columns should be 25% each (when the browser is large enough) and they used to scale equally. Now, the left column is always larger than the right proportionally, the middle expands and shrinks with the size of the browser, but the right column is always too small and crowded.
I’m sorry for the code. It’s a messy table and I wanted to cut what I thought was extraneous but leave the structure.
I’m stumped. Any help would be appreciated.
CLARIFICATION. This table has 3 nested tables within it. Those 3 tables used to resize as you changed the size of the browser window, but now only 2 of the 3 are scaling. The left-most and the center tables scale and re-size as part of the whole; the right-most nested table no longer scales and has shrunk below the 25% width threshold as specified. This is a new phenomenon, but none of the base code has been changed (I verified from a 1 year old copy of the page).
<table width="100%" height="500" border="0" align="left" cellpadding="0" cellspacing="0">
<tr>
<td colspan="5" height="54" align="left" valign="top" bgcolor="#FFFFFF"><br /> </td>
</tr>
<tr>
<td colspan="5" height="21" align="left" valign="top" bgcolor="#FFFFFF"><some images><br /> </td>
</tr>
<tr>
<td colspan="5" height="25" align="left" valign="top" bgcolor="#FFFFFF"><br /> </td>
</tr>
<tr>
<td colspan="3" width="100%" height="1" align="left" valign="middle" </td>
</tr>
<tr> ************PROBLEM STARTS HERE ***************
<td colspan="1" width="25%" height="485" valign="middle" align="right" >
<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td align="right" valign="middle">
<p class="x">
<a href="#"></a><br />
<a href="#"></a><br />
</p>
</td>
<td width="15" align="right" valign="middle"></td>
</tr>
</table></td>
<td colspan="1" height="450" width="1" valign="top" align="right" </td>
<td colspan="1" height="485" align="center" valign="top">
<table width="100%" border="0" valign="top" align="center" cellpadding="0" cellspacing="0">
<tr>
<td colspan="1" height="485" align="center" valign="middle"></td>
</tr>
</table></td>
<td colspan="1" height="450" width="1" valign="top" align="right" </td>
<td colspan="1" height="485" width="25%" valign="middle" align="right" bgcolor="#84968A"><table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="15" align="right" valign="top"></td>
<td align="left" valign="middle">
<p class="x">
<a href="#"></a><br />
<a href="#"></a><br />
</p>
</td>
</tr>
</table></td>
</tr>
</table>
Actually, problem lies in the row above where you have “problem starts here”:
You are saying that 3 columns are 100% of the width. Then, your next row has 5 cells.