Question

我有这个简单的HTML表格。

<table align="center" border="1" cellpadding="0" cellspacing="0" style="width:1000px">
    <thead>
        <tr>
            <th scope="row">BB<br />
            BB<br />
            BB</th>
            <th scope="col">AA</th>
            <th scope="col">AA</th>
            <th scope="col">AA</th>
            <th scope="col">AA</th>
            <th scope="col">AA</th>
            <th scope="col">AA</th>
            <th scope="col">AA</th>
            <th scope="col">AA</th>
            <th scope="col">AA</th>
        </tr>
    </thead>
    <tbody>
    </tbody>
</table>

<p>&nbsp;</p>

但我希望AA细胞能够在顶部顶点，（现在它的中心顶点），而且我想要桌子上方的空间并将表格保留为0。

在html中渲染简单代码我会明白我的意思。

现在我想链接一个简单的CSS来制作这个功能，但我该如何制作呢？

更新，CSS中的解决方案是：

th{
vertical-align:top;
}
body
{
    margin: 0;
    padding: 0;
}

Answer 1

试试这个

th{
vertical-align:top;
}

或仅适用于AA

th[scope="col"]{
vertical-align:top;
}

Answer 2

您可以使用以下CSS仅定位包含aa的单元格：

th[scope="col"] {
    vertical-align: top;
}

这里是jsFiddle demo

Answer 3

试试这个。

<table align="center" border="1" cellpadding="0" cellspacing="0" style="width:1000px">
    <thead>
        <tr style="vertical-align: top;">
            <th scope="row">BB<br />
            BB<br />
            BB</th>
            <th scope="col">AA</th>
            <th scope="col">AA</th>
            <th scope="col">AA</th>
            <th scope="col">AA</th>
            <th scope="col">AA</th>
            <th scope="col">AA</th>
            <th scope="col">AA</th>
            <th scope="col">AA</th>
            <th scope="col">AA</th>
        </tr>
    </thead>
    <tbody>
    </tbody>
</table>

<p>&nbsp;</p>

html简单对齐，在表格和页面中

3 个答案: