Выравнивать 2 таблицы по горизонтали HTML

Question

Я пытаюсь выровнять мои таблицы по горизонтали. Я помещал их в один и тот же div. Я также попытался использовать: встроенный блок для каждой таблицы, но он не работает. «Цвет» таблицы всегда остаются на дне, а не на ту же линию, как «часть» таблица

<div id="tables"> 
    <table class="parts"> 
    <caption>CUSTOMISABLE PARTS</caption> 

    <tr> 
     <td> 
     <label>Frame Size:</label> 
     </td> 

     <td> 
     <div class="Options"> 
     <select> 
     <option value="Please select">Please select</option> 
     <option value="1">46cm 5'1" - 5'5"</option> 
     <option value="2">49cm 5'3" - 5'8"</option> 
     <option value="3">50cm 5'4" - 5'8"</option> 
     <option value="4">54cm 5'8" - 5'11"</option> 
     <option value="5">58cm 5'10" - 6'2"</option> 
     <option value="6">59cm 5'11" - 6'2"</option> 
     </select> 
     </div> 
     </td> 
    </tr> 


    <tr> 
     <td> 
     <label>Battery Size:</label> 
     </td> 

     <td> 
     <div class="Options"> 
     <select> 
     <option value="Please select">Please select</option> 
     <option value="1">Large battery</option> 
     <option value="2">Medium battery</option> 
     <option value="3">Large battery</option> 
     </select> 
     </div> 
     </td> 
    </tr> 

    <tr> 
     <td> 
     <label>Speed Type:</label> 
     </td> 

     <td> 
     <div class="Options"> 
     <select> 
     <option value="Please select">Please select</option> 
     <option value="1">Fix Cog</option> 
     <option value="2">Changable Cog</option> 
     <option value="3">Freewheel</option> 
     <option value="3">8-Speed</option> 
     </select> 
     </div> 
     </td> 
    </tr> 

    <tr> 
     <td>  
     <label>Seats Size:</label> 
     </td> 

     <td> 
     <div class="Options"> 
     <select> 
     <option value="Please select">Please select</option> 
     <option value="1">Small</option> 
     <option value="2">Medium</option> 
     <option value="3">Large</option> 
     </select> 
     </div> 
     </td> 

    </tr> 

    <tr> 
     <td> 
     <label>Rear Break:</label> 
     </td> 

     <td> 
     <div class="Options"> 
     <select> 
     <option value="Please select">Please select</option> 
     <option value="1">Yes</option> 
     <option value="2">No</option> 

     </select> 
     </div> 
     </td> 
    </tr> 


    <tr> 
     <td> 
     <label>Rim type:</label> 
     </td> 

     <td> 
     <div class="Options"> 
     <select> 
     <option value="Please select">Please select</option> 
     <option value="1">Standard</option> 
     <option value="2">Sport</option> 
     </select> 
     </div> 
     </td> 
    </tr> 

</table>  


<table class="colours"> 
    <caption>CHOOSE YOUR COLOURS</caption> 

    <tr> 
     <td> 
     <label>Frame:</label> 
     </td> 

     <td> 
     <div class="Options"> 
     <select> 
     <option value="Please select">Please select</option> 
     <option value="1">46cm 5'1" - 5'5"</option> 
     <option value="2">49cm 5'3" - 5'8"</option> 
     <option value="3">50cm 5'4" - 5'8"</option> 
     <option value="4">54cm 5'8" - 5'11"</option> 
     <option value="5">58cm 5'10" - 6'2"</option> 
     <option value="6">59cm 5'11" - 6'2"</option> 
     </select> 
     </div> 
     </td> 
    </tr> 
</table> 

Но оказались, как этот

моего CSS код:

.parts { 
    font-family: arial; 
    font-size: 20px; 
    margin-left: 20px; 
    width: 33.3%; 
    margin-bottom: 15px; 
    height: auto; 
} 

.parts caption { 
    margin-top: 10px; 
    font-family: arial; 
    font-size: 30px; 
    font-weight: bold; 
    border: 2px solid black; 
    padding-left: 4px; 
    text-align: center; 
} 


.Options select { 
    font-size: 15px; 
    border-color:#999; 
    float: left; 
    width: 200px; 

}  

.colours { 
    font-family: arial; 
    font-size: 20px; 
    margin-left: 36%; 
    position: relative; 
    margin-top: 0px; 

} 

Answer 1

Вы можете использовать display: inline-table на двух дочерних таблицах, как показано ниже.

Вам нужно подумать о том, как лучше всего иметь дело с подписями в таблице, чтобы получить стиль , который вы хотите.

.parts { 
 
    font-family: arial; 
 
    font-size: 20px; 
 
    margin-left: 20px; 
 
    width: 33.3%; 
 
    margin-bottom: 15px; 
 
    height: auto; 
 
    } 
 
    .parts caption { 
 
    margin-top: 10px; 
 
    font-family: arial; 
 
    font-size: 30px; 
 
    font-weight: bold; 
 
    border: 2px solid black; 
 
    padding-left: 4px; 
 
    text-align: center; 
 
    } 
 
    .Options select { 
 
    font-size: 15px; 
 
    border-color: #999; 
 
    float: left; 
 
    width: 200px; 
 
    } 
 
    .colours { 
 
    font-family: arial; 
 
    font-size: 20px; 
 
    margin-left: 20px; /* adjust as neeeded */ 
 
    position: relative; /* not needed */ 
 
    margin-top: 0px; 
 
    } 
 

 
#tables { 
 
    border: 1px dotted blue; /* for demo only */ 
 
} 
 
#tables table { 
 
    display: inline-table; 
 
    border: 1px dotted gray; 
 
    vertical-align: top; /* you need to decide how best to align the child tables */ 
 
}

<div id="tables"> 
 
    <table class="parts"> 
 
    <caption>CUSTOMISABLE PARTS</caption> 
 

 
    <tr> 
 
     <td> 
 
     <label>Frame Size:</label> 
 
     </td> 
 

 
     <td> 
 
     <div class="Options"> 
 
      <select> 
 
      <option value="Please select">Please select</option> 
 
      <option value="1">46cm 5'1" - 5'5"</option> 
 
      <option value="2">49cm 5'3" - 5'8"</option> 
 
      <option value="3">50cm 5'4" - 5'8"</option> 
 
      <option value="4">54cm 5'8" - 5'11"</option> 
 
      <option value="5">58cm 5'10" - 6'2"</option> 
 
      <option value="6">59cm 5'11" - 6'2"</option> 
 
      </select> 
 
     </div> 
 
     </td> 
 
    </tr> 
 

 

 
    <tr> 
 
     <td> 
 
     <label>Battery Size:</label> 
 
     </td> 
 

 
     <td> 
 
     <div class="Options"> 
 
      <select> 
 
      <option value="Please select">Please select</option> 
 
      <option value="1">Large battery</option> 
 
      <option value="2">Medium battery</option> 
 
      <option value="3">Large battery</option> 
 
      </select> 
 
     </div> 
 
     </td> 
 
    </tr> 
 

 
    <tr> 
 
     <td> 
 
     <label>Speed Type:</label> 
 
     </td> 
 

 
     <td> 
 
     <div class="Options"> 
 
      <select> 
 
      <option value="Please select">Please select</option> 
 
      <option value="1">Fix Cog</option> 
 
      <option value="2">Changable Cog</option> 
 
      <option value="3">Freewheel</option> 
 
      <option value="3">8-Speed</option> 
 
      </select> 
 
     </div> 
 
     </td> 
 
    </tr> 
 

 
    <tr> 
 
     <td> 
 
     <label>Seats Size:</label> 
 
     </td> 
 

 
     <td> 
 
     <div class="Options"> 
 
      <select> 
 
      <option value="Please select">Please select</option> 
 
      <option value="1">Small</option> 
 
      <option value="2">Medium</option> 
 
      <option value="3">Large</option> 
 
      </select> 
 
     </div> 
 
     </td> 
 

 
    </tr> 
 

 
    <tr> 
 
     <td> 
 
     <label>Rear Break:</label> 
 
     </td> 
 

 
     <td> 
 
     <div class="Options"> 
 
      <select> 
 
      <option value="Please select">Please select</option> 
 
      <option value="1">Yes</option> 
 
      <option value="2">No</option> 
 

 
      </select> 
 
     </div> 
 
     </td> 
 
    </tr> 
 

 

 
    <tr> 
 
     <td> 
 
     <label>Rim type:</label> 
 
     </td> 
 

 
     <td> 
 
     <div class="Options"> 
 
      <select> 
 
      <option value="Please select">Please select</option> 
 
      <option value="1">Standard</option> 
 
      <option value="2">Sport</option> 
 
      </select> 
 
     </div> 
 
     </td> 
 
    </tr> 
 

 
    </table> 
 

 

 
    <table class="colours"> 
 
    <caption>CHOOSE YOUR COLOURS</caption> 
 

 
    <tr> 
 
     <td> 
 
     <label>Frame:</label> 
 
     </td> 
 

 
     <td> 
 
     <div class="Options"> 
 
      <select> 
 
      <option value="Please select">Please select</option> 
 
      <option value="1">46cm 5'1" - 5'5"</option> 
 
      <option value="2">49cm 5'3" - 5'8"</option> 
 
      <option value="3">50cm 5'4" - 5'8"</option> 
 
      <option value="4">54cm 5'8" - 5'11"</option> 
 
      <option value="5">58cm 5'10" - 6'2"</option> 
 
      <option value="6">59cm 5'11" - 6'2"</option> 
 
      </select> 
 
     </div> 
 
     </td> 
 
    </tr> 
 
    </table> 
 
</div>