Solved

Problems setting column width and row height in table

Posted on 2008-10-03
4
635 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

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

Suggested Solutions

When writing CSS, there are a few simple rules that will make your life easier.    1. Using ‘* {box-sizing:border-box;}’. Using this will wrap all your elements in a nice little compact box-model that will give you the width you want, like so... …
Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…

705 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

Need Help in Real-Time?

Connect with top rated Experts

22 Experts available now in Live!

Get 1:1 Help Now