Html 自动调整表格大小（列）

我正在建立一个网站，我使用一个表格作为标题。该表有7列。我使用一些代码来自动调整我的网站，调整大小的脚本工作完美。当表格处于某一大小时，除表格外，所有内容都会调整大小。我想这是因为手机的填充是15，但我想保持在15。这是表脚本：

<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=''"><A   HREF="website" STYLE="text-decoration: none; color: white;">Home</a></td>
<td class="menu" onmouseover="style.backgroundColor='#B30000';"   onmouseout="style.backgroundColor=''"><A HREF="website" STYLE="text-decoration: none; color:   white;">Transport</a></td>
<td class="menu" onmouseover="style.backgroundColor='#B30000';" onmouseout="style.backgroundColor=''"><A HREF="website" STYLE="text-decoration: none; color: white;">Distributie</a></td>
<td class="menu" onmouseover="style.backgroundColor='#B30000';" onmouseout="style.backgroundColor=''"><A HREF="website"  STYLE="text-decoration: none; color:  white;"> Historie</a></td>
<td class="menu" onmouseover="style.backgroundColor='#B30000';"   onmouseout="style.backgroundColor=''"><A HREF="website" STYLE="text-decoration: none; color:     white;">Vacatures</a></td>
<td class="menu" onmouseover="style.backgroundColor='#B30000';" onmouseout="style.backgroundColor=''"><a href="website" style="text-decoration: none; color:         white;">Route</a></td>
<td class="menu" onmouseover="style.backgroundColor='#B30000';" onmouseout="style.backgroundColor=''"><A HREF="website" STYLE="text-decoration: none; color:  white;">Contact</a></td> </tr>


</tbody></table></td>

</tr>
</table></div>

---

我希望有人能帮助我，让表自动调整与网站的宽度，而不是在一定的宽度卡住。谢谢。（我将

href

更改为网站，因为我想保留我制作此网站的隐私。）

我建议您将结构更改为更灵活的形式，同时请记住，使用内联样式是不可接受的（如果您只是因为您的示例而使用它们，我认为这是可以的，但始终使用css，即使是示例，因为它很容易帮助您）： 例子： HTML

---

建议。使用

而不是创建菜单在语义上更为正确。使用表有什么原因吗？基本上，您的表在该点上显示的是允许的最小值。对于某些特定的端口大小，您希望发生什么？您是否尝试执行响应菜单？

<div id="nav">
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Transport</a></li>
        <li><a href="#">Distributie</a></li>
        <li><a href="#">Historie</a></li>
        <li><a href="#">Vacatures</a></li>
        <li><a href="#">Route</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
</div>

#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;
}