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