title: Auto Resize Table (Columns)
body: <p>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: </p>
  
  <pre><code>&lt;div id="header"&gt;
  &lt;table width="100%" align="center" cellpadding="0" cellspacing="20" style="font-     family:Tahoma, Geneva, sans-serif; color:#FFFFFF; background:#FF0101"&gt;
  &lt;tr&gt;
  
  &lt;td  width="100%" height="70%" align="center" valign="top"&gt;&lt;table align="left"   cellpadding="15" cellspacing="0" class="menu"&gt;
  &lt;tbody&gt;&lt;tr&gt;&lt;td class="menu" bgcolor="#5B8CFF"   onmouseover"style.backgroundColor='#B30000';" onmouseout="style.backgroundColor=''"&gt;&lt;A   HREF="website" STYLE="text-decoration: none; color: white;"&gt;Home&lt;/a&gt;&lt;/td&gt;
  &lt;td class="menu" onmouseover="style.backgroundColor='#B30000';"   onmouseout="style.backgroundColor=''"&gt;&lt;A HREF="website" STYLE="text-decoration: none; color:   white;"&gt;Transport&lt;/a&gt;&lt;/td&gt;
  &lt;td class="menu" onmouseover="style.backgroundColor='#B30000';" onmouseout="style.backgroundColor=''"&gt;&lt;A HREF="website" STYLE="text-decoration: none; color: white;"&gt;Distributie&lt;/a&gt;&lt;/td&gt;
  &lt;td class="menu" onmouseover="style.backgroundColor='#B30000';" onmouseout="style.backgroundColor=''"&gt;&lt;A HREF="website"  STYLE="text-decoration: none; color:  white;"&gt; Historie&lt;/a&gt;&lt;/td&gt;
  &lt;td class="menu" onmouseover="style.backgroundColor='#B30000';"   onmouseout="style.backgroundColor=''"&gt;&lt;A HREF="website" STYLE="text-decoration: none; color:     white;"&gt;Vacatures&lt;/a&gt;&lt;/td&gt;
  &lt;td class="menu" onmouseover="style.backgroundColor='#B30000';" onmouseout="style.backgroundColor=''"&gt;&lt;a href="website" style="text-decoration: none; color:         white;"&gt;Route&lt;/a&gt;&lt;/td&gt;
  &lt;td class="menu" onmouseover="style.backgroundColor='#B30000';" onmouseout="style.backgroundColor=''"&gt;&lt;A HREF="website" STYLE="text-decoration: none; color:  white;"&gt;Contact&lt;/a&gt;&lt;/td&gt; &lt;/tr&gt;
  
  
  &lt;/tbody&gt;&lt;/table&gt;&lt;/td&gt;
  
  &lt;/tr&gt;
  &lt;/table&gt;&lt;/div&gt;
  </code></pre>
  
  <p>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 <code>href</code> to website because I want to keep the website I'm making this for private.)</p>