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