HTML CSS在div中的表格定位

Question

我有下面的工作示例，我需要稍微調整：

正如你所看到的，有兩個中心對齊的表格。用左下方的垂直按鈕列表對齊。

這些表格可以有不同數量的<tr>'s，我希望表格在頂部而不是從底部對齊。即我不想在表格頂端留下空隙2.有人知道我可以如何修改嗎？

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

添加到您的.TSS類：

vertical-align: top; 

我將它下面的代碼試運行它：

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