[RESOLVED] Auto expand DIV width

I've got a tipping site and after the lockout for each round I want to display all the games for the round along with how many tippers have tipped each team. This part is no probs.

My issue is if a tipper clicks on the total tips for one team a DIV will appear with every tippers name that has tipped that team. I've got most of this as well. My problem is the TD which has the DIV to display the tippers is very narrow yet the DIV can be very wide. Currently when the DIV is displayed it is only the width of the TD. So my question is....how can I make the DIV displaying the tippers automatically resize based on it's contents and not the width of the TD? If you copy and paste the code below you'll see what I'm after.

HTML Code:

<script type="text/javascript">
 
function ShowHideDiv($ID)
{
    var ele = document.getElementById($ID);
            
            if(ele.style.display == "block") {
                    ele.style.display = "none";
            }
            else {
        
                ele.style.display = "block";
                
            }
}
</script>
 
<style type='text/css'>
div.hidediv {
 
display:none;
border:1px solid black;
background-color: white;
/*background-color: red;*/
padding: 5px;
}
</style>
<center>
<table width="500" cellpadding="1" cellspacing="1" border="1">
 
            
            <!--The column heading-->
            <tr>
                <td width="50" align="center" ><strong>Tips</strong></td>  
                <td width="100" ><strong>Home Team</strong></td>
                <td width="10" align="center" ><strong>Vs</strong></td>               
                <td width="100"  align="right" ><strong>Away Team</strong></td>
                <td width="50" align="center" ><strong>Tips</strong></td>  
            </tr>
 
                
                    
 
        <tr bgcolor="white">
                <td align="center" >
&nbsp;&nbsp;&nbsp;<a href='javascript:ShowHideDiv("Home1")' title='Display Tippers'>19</a>
                <div class='hidediv' id='Home1' align='left'>Tipper Name 1<br>Tipper Name 2<br>Tipper Name 3<br>Tipper Name 4 Is Really Long<br>Tipper Name 5<br></div></td>
                <td>St Kilda</td>
                <td align="center" >V</td>
                <td align="right" > Richmond</td> 
                <td align="center" >2</td>      
                </tr>
                    
        </table> 
        </center>

The div's not really your problem, the td is; the div cannot expand beyond the width of its parent, and its parent's width is set to 50 by virtue of setting the width on the column heading td (all <td>s in a column will respect the width setting of any <td> in the column - so they create a visually consistent display; if there's a conflict, I believe the greatest width value is used).

So, you'll need to either remove the width="50" from the Tips header td, or increase the value to something that accommodates the div at full width.

I've solved my issue.

I moved all the DIVs outside the table and now when a tipper clicks on the total tips for one team I use the current mouse position (+/- a few pixels) to position the appropriate DIV where I want it.