HTML CSS表内の配置

Question

私はわずかな調整が必要な以下の作業例を持っています。

ご覧のとおり、2つの中央揃えの表があります。下の縦のボタンのリストが左揃えで表示されます。

テーブルには異なる番号の<tr>が入っている可能性があります。また、テーブルの上部から下部にかけて均等に並べることもできます。私。私はテーブルの上に隙間がないようにしたい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>