Auto Resize Table (Columns) - html

Question

I am building a website and I use a table as a header. The table has 7 columns. I use some code to automatically resize my website, the resize script works perfect. Everything resizes except the table when it is at a certain size. I think it's because of the cellpadding which is 15 but I want to keep it at 15. This is the table script:
<div id="header">
<table width="100%" align="center" cellpadding="0" cellspacing="20" style="font- family:Tahoma, Geneva, sans-serif; color:#FFFFFF; background:#FF0101">
<tr>
<td width="100%" height="70%" align="center" valign="top"><table align="left" cellpadding="15" cellspacing="0" class="menu">
<tbody><tr><td class="menu" bgcolor="#5B8CFF" onmouseover"style.backgroundColor='#B30000';" onmouseout="style.backgroundColor=''">Home</td>
<td class="menu" onmouseover="style.backgroundColor='#B30000';" onmouseout="style.backgroundColor=''">Transport</td>
<td class="menu" onmouseover="style.backgroundColor='#B30000';" onmouseout="style.backgroundColor=''">Distributie</td>
<td class="menu" onmouseover="style.backgroundColor='#B30000';" onmouseout="style.backgroundColor=''"> Historie</td>
<td class="menu" onmouseover="style.backgroundColor='#B30000';" onmouseout="style.backgroundColor=''">Vacatures</td>
<td class="menu" onmouseover="style.backgroundColor='#B30000';" onmouseout="style.backgroundColor=''">Route</td>
<td class="menu" onmouseover="style.backgroundColor='#B30000';" onmouseout="style.backgroundColor=''">Contact</td> </tr>
</tbody></table></td>
</tr>
</table></div>
I hope somebody could help me to let the table automatic resize with the website width and not stuck at a certain width. Thanks a lot. ( I changed the href to website because I want to keep the website I'm making this for private.)

Answer 1

I suggest you to change your structure to something more flexible, also remember use inline styles are not aceptable (if you only use them due to your example I think it is ok, but always use css, even for examples because it is easy to help you):
Example:http://jsfiddle.net/GBTg4/
HTML
<div id="nav">
<ul>
<li>Home</li>
<li>Transport</li>
<li>Distributie</li>
<li>Historie</li>
<li>Vacatures</li>
<li>Route</li>
<li>Contact</li>
</ul>
</div>
CSS
#nav ul
{
width:100%;
list-style-type: none;
margin:0;
padding:0;
}
#nav li
{
display:inline;
float:left;
width:14.28571428571429%;
background-color: blue;
text-align:center;
}
#nav a
{
color:#FFF;
line-height:35px;
display:inline-block;
width:100%;
}
#nav a:hover
{
background-color:#B30000;
}