Question

我正在建立一个网站，我使用一个表作为标题。该表有7列。我使用一些代码来自动调整我的网站大小，调整大小脚本是完美的。当桌子处于特定大小时，除了桌子外，所有内容都会调整大小。我认为这是因为cellpadding是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更改为网站，因为我想保留网站，我将其设为私人网站。）

Answer 1

我建议你把你的结构更改为更灵活的东西，还记得使用内联样式是不可接受的（如果你只使用它们，因为你的例子我认为它没关系，但总是使用css，即使是例子，因为它是很容易帮到你）：例如：http://jsfiddle.net/GBTg4/ 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>

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

自动调整大小表（列）

1 个答案: