[RESOLVED] Auto expand DIV width

[lintz]

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.

<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>