asked on

Problems setting column width and row height in table

I am trying to set up a table - see attached file - and have set the table width to 370 and the column width for the first row to either 30 or 70 and initially it all looks good. However, when I test the page with the dynamic data my cells all become different widths/heights.

Can someone help me overcome this?

<table width="370" height="600" border="2" cellpadding="1">
  <caption>
    Boston Square
  </caption>
  <tr>
  <td rowspan="5" bordercolor="#FFFFFF" width="20"  >
 
  <cfoutput>
<cfset var=reverse("Probability")>
<cfloop from="1" to="#len(var)#" index="idx">
<font class="verticaltext" style:verticaltext> #mid(var,idx,1)# </font><br>
</cfloop>
</cfoutput></td>
    <td bordercolor="#FFFFFF" width="20"> <span class="verticaltext">80-100%</span></td>
    <td bordercolor="#FFFFFF" width="20">5</td>
    <td align="center" valign="middle" width="60" bgcolor="#00FF00" onMouseOver="toolTip('Risks <cfoutput>#myinitialarray[21][2]#</cfoutput>','#FFFFFF','#0065BD');" onMouseOut="toolTip();" ><cfoutput>#myinitialarray[21][1]#</cfoutput></td>
    <td align="center" valign="middle" width="60" bgcolor="#FFFF00" onMouseOver="toolTip('Risks <cfoutput>#myinitialarray[22][2]#</cfoutput>','#FFFFFF','#0065BD');" onMouseOut="toolTip();"><cfoutput>#myinitialarray[22][1]#</cfoutput></td>
    <td align="center" valign="middle" width="60" bgcolor="#FFFF00" onMouseOver="toolTip('Risks <cfoutput>#myinitialarray[23][2]#</cfoutput>','#FFFFFF','#0065BD');" onMouseOut="toolTip();"><cfoutput>#myinitialarray[23][1]#</cfoutput></td>
	<td align="center" valign="middle" width="60" bgcolor="#FF0000" onMouseOver="toolTip('Risks <cfoutput>#myinitialarray[24][2]#</cfoutput>','#FFFFFF','#0065BD');" onMouseOut="toolTip();"><cfoutput>#myinitialarray[24][1]#</cfoutput></td>
    <td align="center" valign="middle" width="60" bgcolor="#FF0000" onMouseOver="toolTip('Risks <cfoutput>#myinitialarray[25][2]#</cfoutput>','#FFFFFF','#0065BD');" onMouseOut="toolTip();"><cfoutput>#myinitialarray[25][1]#</cfoutput></td>
  </tr>
  <tr>
      <td bordercolor="#FFFFFF" class="verticaltext">50-80%</td>
    <td bordercolor="#FFFFFF">4</td>
 
    <td align="center" valign="middle" bgcolor="#00FF00" onMouseOver="toolTip('Risks <cfoutput>#myinitialarray[16][2]#</cfoutput>','#FFFFFF','#0065BD');" onMouseOut="toolTip();"><cfoutput>#myinitialarray[16][1]#</cfoutput></td>
    <td align="center" valign="middle" bgcolor="#FFFF00" onMouseOver="toolTip('Risks <cfoutput>#myinitialarray[17][2]#</cfoutput>','#FFFFFF','#0065BD');" onMouseOut="toolTip();"><cfoutput>#myinitialarray[17][1]#</cfoutput></td>
    <td align="center" valign="middle" bgcolor="#FFFF00" onMouseOver="toolTip('Risks <cfoutput>#myinitialarray[18][2]#</cfoutput>','#FFFFFF','#0065BD');" onMouseOut="toolTip();"><cfoutput>#myinitialarray[18][1]#</cfoutput></td>
	<td align="center" valign="middle" bgcolor="#FF0000" onMouseOver="toolTip('Risks <cfoutput>#myinitialarray[19][2]#</cfoutput>','#FFFFFF','#0065BD');" onMouseOut="toolTip();"><cfoutput>#myinitialarray[19][1]#</cfoutput></td>
    <td align="center" valign="middle" bgcolor="#FF0000" onMouseOver="toolTip('Risks <cfoutput>#myinitialarray[20][2]#</cfoutput>','#FFFFFF','#0065BD');" onMouseOut="toolTip();"><cfoutput>#myinitialarray[20][1]#</cfoutput></td>
  </tr>
  <tr>
    <td bordercolor="#FFFFFF" class="verticaltext">20-50%</td>
    <td bordercolor="#FFFFFF">3</td>
    <td align="center" valign="middle" bgcolor="#00FF00" onMouseOver="toolTip('Risks <cfoutput>#myinitialarray[11][2]#</cfoutput>','#FFFFFF','#0065BD');" onMouseOut="toolTip();"><cfoutput>#myinitialarray[11][1]#</cfoutput></td>
    <td align="center" valign="middle" bgcolor="#00FF00" onMouseOver="toolTip('Risks <cfoutput>#myinitialarray[12][2]#</cfoutput>','#FFFFFF','#0065BD');" onMouseOut="toolTip();"><cfoutput>#myinitialarray[12][1]#</cfoutput></td>
    <td align="center" valign="middle" bgcolor="#FFFF00" onMouseOver="toolTip('Risks <cfoutput>#myinitialarray[13][2]#</cfoutput>','#FFFFFF','#0065BD');" onMouseOut="toolTip();"><cfoutput>#myinitialarray[13][1]#</cfoutput></td>
	<td align="center" valign="middle" bgcolor="#FFFF00" onMouseOver="toolTip('Risks <cfoutput>#myinitialarray[14][2]#</cfoutput>','#FFFFFF','#0065BD');" onMouseOut="toolTip();"><cfoutput>#myinitialarray[14][1]#</cfoutput></td>
    <td align="center" valign="middle" bgcolor="#FF0000" onMouseOver="toolTip('Risks <cfoutput>#myinitialarray[15][2]#</cfoutput>','#FFFFFF','#0065BD');" onMouseOut="toolTip();"><cfoutput>#myinitialarray[15][1]#</cfoutput></td>
  </tr>
  <tr>
     <td bordercolor="#FFFFFF" class="verticaltext">5-20%</td>
    <td bordercolor="#FFFFFF">2</td>
   <td align="center" valign="middle" bgcolor="#0000FF" onMouseOver="toolTip('Risks <cfoutput>#myinitialarray[6][2]#</cfoutput>','#FFFFFF','#0065BD');" onMouseOut="toolTip();"><cfoutput>#myinitialarray[6][1]#</cfoutput></td>
    <td align="center" valign="middle" bgcolor="#00FF00" onMouseOver="toolTip('Risks <cfoutput>#myinitialarray[7][2]#</cfoutput>','#FFFFFF','#0065BD');" onMouseOut="toolTip();"><cfoutput>#myinitialarray[7][1]#</cfoutput></td>
    <td align="center" valign="middle" bgcolor="#FFFF00" onMouseOver="toolTip('Risks <cfoutput>#myinitialarray[8][2]#</cfoutput>','#FFFFFF','#0065BD');" onMouseOut="toolTip();"><cfoutput>#myinitialarray[8][1]#</cfoutput></td>
	<td align="center" valign="middle" bgcolor="#FFFF00" onMouseOver="toolTip('Risks <cfoutput>#myinitialarray[9][2]#</cfoutput>','#FFFFFF','#0065BD');" onMouseOut="toolTip();"><cfoutput>#myinitialarray[9][1]#</cfoutput></td>
    <td align="center" valign="middle" bgcolor="#FF0000" onMouseOver="toolTip('Risks <cfoutput>#myinitialarray[10][2]#</cfoutput>','#FFFFFF','#0065BD');" onMouseOut="toolTip();"><cfoutput>#myinitialarray[10][1]#</cfoutput></td>
  </tr>
  <tr>
    <td bordercolor="#FFFFFF" class="verticaltext">&lt 5%</td>
    <td bordercolor="#FFFFFF">1</td>
    <td align="center" valign="middle" bgcolor="#0000FF" onMouseOver="toolTip('Risks <cfoutput>#myinitialarray[1][2]#</cfoutput>','#FFFFFF','#0065BD');" onMouseOut="toolTip();"><cfoutput>#myinitialarray[1][1]#</cfoutput></td>
    <td align="center" valign="middle" bgcolor="#0000FF" onMouseOver="toolTip('Risks <cfoutput>#myinitialarray[2][2]#</cfoutput>','#FFFFFF','#0065BD');" onMouseOut="toolTip();"><cfoutput>#myinitialarray[2][1]#</cfoutput></td>
    <td align="center" valign="middle" bgcolor="#00FF00" onMouseOver="toolTip('Risks <cfoutput>#myinitialarray[3][2]#</cfoutput>','#FFFFFF','#0065BD');" onMouseOut="toolTip();"><cfoutput>#myinitialarray[3][1]#</cfoutput></td>
	<td align="center" valign="middle" bgcolor="#00FF00" onMouseOver="toolTip('Risks <cfoutput>#myinitialarray[4][2]#</cfoutput>','#FFFFFF','#0065BD');" onMouseOut="toolTip();"><cfoutput>#myinitialarray[4][1]#</cfoutput></td>
    <td align="center" valign="middle" bgcolor="#FFFF00" onMouseOver="toolTip('Risks <cfoutput>#myinitialarray[5][2]#</cfoutput>','#FFFFFF','#0065BD');" onMouseOut="toolTip();"><cfoutput>#myinitialarray[5][1]#</cfoutput></td>
  </tr>
    <tr bordercolor="#FFFFFF">
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td><div align="center">1</div></td>
    <td><div align="center">2</div></td>
    <td><div align="center">3</div></td>
    <td><div align="center">4</div></td>
    <td><div align="center">5</div></td>
  </tr>
  <tr bordercolor="#FFFFFF">
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td><div align="center"><span class="style1">&lt;£100K</span></div></td>
    <td><div align="center"><span class="style1">£100K - £300K</span></div></td>
    <td><div align="center"><span class="style1">£300 - £1M</span></div></td>
    <td><div align="center"><span class="style1">£1M - £3M</span></div></td>
    <td><div align="center"><span class="style1">&gt;£3M</span></div></td>
  </tr>
  <tr bordercolor="#FFFFFF">
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td colspan="5"><div align="center"><strong>Impact</strong></div></td>
  </tr>
</table>

Open in new window

bs1.pdf

gdemaria

If you have only specified the width of the first column, then all other columns can be any width provided the total width of the table is 670.

If you want all the columns to be the same width, set each one to 20% (5 columns x 20% = 100%, change the percentage if you have more/less columns).

ASKER CERTIFIED SOLUTION

gdemaria

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

SOLUTION