Go Premium for a chance to win a PS4. Enter to Win

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 646
  • Last Modified:

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
0
Nemetona
Asked:
Nemetona
  • 2
2 Solutions
 
gdemariaCommented:
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).
0
 
gdemariaCommented:
oops, the 670 in my previous response is a type-o, I meant 370

double oops, sorry, i didn't look closely enough.  You have set your column widths but they don't add up to 370.   Change the values so they add up to your total table width, or switch to using percentages that add up to 100%
0
 
scrathcyboyCommented:
dynamic data will / can / usually does change the width and height of table cells.  What is the browser to do?  Do you want your data chopped off so no one can see it?  Of course not.  So the browsers SCALE the width and height of table cells to fit the data going into them, because it is the assumption of browsers that people want to see what data is in the table cells, not cut it out.  So with dynamic data coming from a database, the BEST you can do is specify first the max width of the table you want, and then if you want to scale the various cells in relative widths, then put real or relative sizes in each TD, to get the balance you want -- but in the end, if the data overflows a cell, all the adjacent cells will be adjusted to fit the big cell.
0
 
NemetonaAuthor Commented:
Thank you qdemaria for the solution and scrathcyboy for the explaination.
0

Featured Post

Hire Technology Freelancers with Gigs

Work with freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely, and get projects done right.

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now