I've got a working example that needs just a little tweaking:
In this setup, you'll find two center-aligned tables with a list of vertical buttons below, left-aligned.
The challenge is making sure the tables are equally aligned at the top instead of the bottom, regardless of how many <tr>'s they contain. In other words, we want to eliminate any gap at the top of Table 2. Any ideas on how to achieve this?
Here's the link to the code snippet: https://jsfiddle.net/Jaron787/gg30jgh5/16/
HTML
<div id="lse" class="display">
<div id="centertbl">
<table id="tblData" class="TSS">
<tr>
<td align="center" colspan="4"><b>Table 1</b></td>
</tr>
<tr>
<td align="center" colspan="4">Data 1</td>
</tr>
<tr>
<td align="center" colspan="4">Data 2</td>
</tr>
</table>
<table id="tblData" class="TSS">
<tr>
<td align="center" colspan="4"><b>Table 2</b></td>
</tr>
<tr>
<td align="center" colspan="4">Data 1</td>
</tr>
</table>
</div>
<input type="submit" class="button button1" name="submitButton" value="Button 1">
<input type="submit" class="button button1" name="submitButton" value="Button 2">
<input type="submit" class="button button1" name="submitButton" value="Button 3">
<input type="submit" class="button button1" name="submitButton" value="Button 4">
</div>
CSS
.TSS {
border: 1px solid #000000;
float: none;
font-family: Verdana,Geneva,sans-serif;
font-size: 10.6px;
font-style: normal;
padding: 10px;
text-decoration: none;
display: inline-block;
}
#centertbl {
text-align: center;
}
.button {
background-color: #4CAF50;
/* Green */
border: none;
color: white;
padding: 5px 15px;
text-align: center;
text-decoration: none;
display: block;
font-size: 16px;
margin: 4px 2px;
-webkit-transition-duration: 0.4s;
/* Safari */
transition-duration: 0.4s;
cursor: pointer;
}
.button1 {
background-color: white;
color: black;
border: 2px solid #4CAF50;
}
.button1:hover {
background-color: #4CAF50;
color: white;
}