HTML CSS Tabellenpositionierung innerhalb eines div

Question

Ich habe das folgende Arbeitsbeispiel, das ich etwas zwicken muss:

Wie Sie sehen können, gibt es zwei zentriert ausgerichtete Tabellen. Mit einer Liste von vertikalen Schaltflächen unterhalb links ausgerichtet.

Die Tabellen können unterschiedliche Nummern von <tr> haben und ich möchte, dass die Tabellen oben nicht von unten gleich ausgerichtet sind. I.e. Ich will keine Lücke an der Spitze des Tisches 2. Weiß jemand, wie ich das ändern kann?

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

Answer 1

Fügen Sie diese auf Ihre .TSS Klasse:

vertical-align: top; 

Ich habe hinzugefügt zu deinem Code unten; versuchen, es läuft:

.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; 
 
    vertical-align: top; 
 
} 
 

 
#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; 
 
}

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