Question

I have three tables. When they are all filled with data (10 rows) they look fine. See picture

When, however, the max capacity (i.e. 10 rows) hasn’t been reached, the tables gets centered.

I want to keep the alignment top as in the first picture and also the buttons on the bottom. Is there any simple style to do this? My HTML looks like this

<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

Hi now add td valign="top"

As like this

<td valign="top">

or
Used in

css

td{
vertical-align:top;
}