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

CSS宽度不覆盖表的100％

1 个答案: