Html 将桌面对齐

我有三张桌子。当它们都充满了数据（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>

<td valign="top">

名称
创造
名称
创造
名称

Hi现在添加td

valign=“top”

像这样

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

<td valign="top">

---

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

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

添加样式

td { vertical-align: top;}

试试这个

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

名称
创造

哦，那很简单。谢谢（我将在几分钟后标记您的答案。显然，我必须等待10分钟才能完成。）