CSS​​宽度不包括表格的100％

Question

我想要使用CSS来格式化表格。该表有三个<td>，它们可以覆盖表格宽度的20％/ 60％/ 20％，但最后的td会转到下一行，而不是保持在同一行。

下面是表的CSS：

table{ 
    width: 100%; 
    height: 100%; 
    float: left; 
} 
#left_menu{ 
    width: 20%; 
    height: 100%; 
    float: left; 
    border-style:solid; 
    border-width:1px; 
    border-color:#000000; 
} 
#content{ 
    width: 60%; 
    height: 100%; 
    float: left; 
    border-style:solid; 
    border-width:1px; 
    border-color:#000000; 
} 
#right_menu{ 
    width: 20%; 
    height: 100%; 
    float: left; 
    border-style:solid; 
    border-width:1px; 
    border-color:#000000; 
} 

该网站是http://homeworkwizzard.com如果你想看看它的外观。请问为什么会发生这种情况？

Answer 1

我同意这些意见，你应该不会使用表格来布置设计。如果你正在学习，那么你应该从一开始就学好，这样你就不会陷入坏习惯。

这就是说，回答你的问题。问题是与float:left你正在使用的一切，我假设你正在试图对齐文本的左侧，在这种情况下，你应该使用text-align: left;

jsFiddle Demo

HTML：

<table> 
    <tr id="banner"> 
     <th colspan="3">Banner</th> 
    </tr> 
    <tr id="body"> 
     <td id="left_menu">Left Menu</td> 
     <td id="content">Content</td> 
     <td id="right_menu">Right Menu</td> 
    </tr> 
    <tr id="footer"> 
     <td colspan="3">Footer</td> 
    </tr> 
</table> 

CSS：

html{ 
    padding: 5% 10%; 
    margin: 0px; 
    border: 0px; 
    background-color: #FEFFAF; 
    background-size: 100%; 
} 
body { 
    width: 100%; 
    box-shadow: 5px 5px 500px #888888; 
    background: #e3e0c0; 
    opacity: 0.85; 
} 
table{ 
    width: 100%; 
    height: 100%; 
} 
#banner{ 
    width: 100%; 
    height: 15%; 
    text-align: left; 
} 
#body{ 
    width: 100%; 
    height: 70%; 
} 
#footer{ 
    width: 100%; 
    height: 15%; 
} 
#left_menu{ 
    width: 20%; 
    height: 100%; 
    border-style:solid; 
    border-width:1px; 
    border-color:#000000; 
} 
#content{ 
    width: 60%; 
    height: 100%; 
    border-style:solid; 
    border-width:1px; 
    border-color:#000000; 
} 
#right_menu{ 
    width: 20%; 
    height: 100%; 
    border-style:solid; 
    border-width:1px; 
    border-color:#000000; 
}