将表格对齐顶部

Question

我有三张桌子。当他们都填充数据（10行）时，他们看起来很好。见图

但是，当尚未达到最大容量（即10行）时，表格会居中。

我想保持顶部的对齐顶部和底部的按钮。这有什么简单的风格吗？我的HTML看起来像这样

<table width="100%">
    <tr>
        <td>
            <table id="SomeTableContainer">
                <tr>
                    <th>Name</th>
                </tr>
            </table>
            <button id="prev1"><<</button>
            <button id="next1">>></button>
            <button id="create1">Create</button>
        </td>
        <td>
            <table id="SomeOtherTableContainer">
                <tr>
                    <th>Name</th>
                </tr>
            </table>
            <button id="prev2"><<</button>
            <button id="next2">>></button>
            <button id="create2">Create</button>
        </td>
        <td>
            <table id="OtherTableContainer">
                <tr>
                    <th>Name</th>
                </tr>
            </table>
            <button id="prev3"><<</button>
            <button id="next3">>></button>
        </td>
    </tr>
</table>

Answer 1

您好现在添加 td valign="top"

就像这样

<td valign="top">

或 用于

<强> CSS

td{
vertical-align:top;
}

Answer 2

只需将其添加到您的第一个TR：

<tr valign="top"></tr>

Answer 3

添加样式

td { vertical-align: top;}

Answer 4

试试这个

<td valign="top">
                <table id="SomeOtherTableContainer">
                    <tr>
                        <th>Name</th>
                    </tr>
                </table>
                <button id="prev2"><<</button>
                <button id="next2">>></button>
                <button id="create2">Create</button>
            </td>