html - 水平对齐 2 个表格 HTML

Question

我正在尝试水平对齐我的表格。我像这样把它们放在同一个 div 中。我还尝试使用:每个表的内联 block ，但它不起作用。 “颜色”表始终位于底部，与“零件”表不在同一行

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