I currently have three tables in my HTML code. When all three tables are filled with data (10 rows each), they appear correctly aligned as shown in the first picture.
However, if any of the tables do not have the maximum capacity of 10 rows reached, they get centered on the page.
I am looking for a simple way to keep the alignment at the top like in the first picture and also keep the buttons at the bottom. Is there a specific style or CSS solution I can use to achieve 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>