?
Solved

Problems setting column width and row height in table

Posted on 2008-10-03
4
Medium Priority
?
649 Views
Last Modified: 2011-10-19
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
Comment
Question by:Nemetona
  • 2
4 Comments
 
LVL 39

Expert Comment

by:gdemaria
ID: 22635053
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
 
LVL 39

Accepted Solution

by:
gdemaria earned 1600 total points
ID: 22635082
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
 
LVL 44

Assisted Solution

by:scrathcyboy
scrathcyboy earned 400 total points
ID: 22639826
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
 

Author Closing Comment

by:Nemetona
ID: 31502792
Thank you qdemaria for the solution and scrathcyboy for the explaination.
0

Featured Post

Take Control of Web Hosting For Your Clients

As a web developer or IT admin, successfully managing multiple client accounts can be challenging. In this webinar we will look at the tools provided by Media Temple and Plesk to make managing your clients’ hosting easier.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
This article discusses four methods for overlaying images in a container on a web page
In this tutorial viewers will learn how add a full-size background image to a webpage using CSS3. Create a new HTML document with an internal stylesheet.: In CSS, define the html element to have a background image. Use a high resolution image.: In t…
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
Suggested Courses
Course of the Month6 days, 22 hours left to enroll

593 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question