Question

HTML / CSS noobie here。

很抱歉，如果这是一个非常简单的问题，但我不知道如何在Google上发帖。

Website

这是我为高中机器人团队制作的（非常非常）基础网站。

如何让侧边栏从顶部开始而不是居中？它是另一张桌子里面的一张桌子。

以下是“侧栏：”

的CSS

#sidebar {
height: 100%;
width: 200px;
}

编辑：这是HTML：

<body>
<table>
    <tr class="banner">
        <h1>Banner goes here</h1>
        <p>Nothing here is final. No, the final site will not be this ugly.</p>
    </tr>
    <tr>
        <td>
            <table class="center" id="sidebar">
                <tr><td>Home</td></tr>
                <tr><td>About</td></tr>
                <tr><td>Sponsors</td></tr>
                <tr><td>Contact Us</td></tr>
                <tr><td>FTC 5969</td></tr>
                <tr><td>FRC 4538</td></tr>
                <tr><td>FTC 7084</td></tr>
                <tr><td>Media</td></tr>
                <tr><td>Events</td></tr>
            </table>
        </td>
        <td>
            (main content)
        </td>
    </tr>
</table>

Answer 1

我想我已经为你解决了这个问题。

我在我的网站上尝试了同样的事情

<td style="vertical-align:top;">

将该样式属性添加到左侧内容周围的td标记中，并将其重置到其所在单元格的顶部。

CSS替代方案是

#sidebar {
height: 100%;
width: 200px;
vertical-align:top;
}

或者如果您特别想要它只是为您的td标签做

#sidebar td {
vertical-align:top;
}

主#sidebar条目

下方

Answer 2

如果你在其他表格中使用表格，只需在#sidebar的TD上使用 vertical-align：top 。

DEMO：http://jsfiddle.net/nukec/7XjTv/

HTML：

<table class="one" >
    <tr>
        <td>
<table>
    <tr>
        <td>            sdsdsdsdsd
                   </td>
    </tr>
</table> 
        </td>
    </tr>
</table>

CSS：

table{
    border: 1px solid red;
}

.one{
    height:500px;
}
td{
    vertical-align:top;
}

桌子麻烦

2 个答案: