Solved

Problems setting column width and row height in table

Posted on 2008-10-03
4
639 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 400 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 100 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

Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

Question has a verified solution.

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

When applying CSS to your HTML, there are many different ways to select which element(s) the CSS applies to.  Some of these selectors are more commonly known and used than others - Here are the more common ones: #X - Matches an ID of X .X - Matche…
SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…

777 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