HTML - お互いの隣に2つの異なるテーブルを置く

Question

私はこれらの2つのテーブルをお互いに置いておきたいと思っています。私はdivを使ってみましたが、それらを並べて置くことはできませんでした。だから私はstyle="display: inline-blockを使ってみましたが、うまくいきません。これについて助けが必要です。

<form id="checkbox1" method="get" align="left"> 
 
    <table style="width:30%" align="left" style="display: inline-block;"> 
 

 
    <input type="checkbox" value="select" align="center" id="check1"> Calculate The Number of Head Count When Days Are Fixed<br> 
 

 
    <tr> 
 
     <td>Number of Days</td> 
 
     <td class="left"><input type="text" id="numDays" /></td> 
 
    </tr> 
 

 
    <tr> 
 
     <td>Head Count</td> 
 
     <td class="left"><input type="text" name="hc" id="hc" /> Per Shift</td> 
 
    </tr> 
 

 
    </table> 
 
</form> 
 

 

 
<form id="checkbox2" method="get" align="left"> 
 
    <table style="width:30%" align="left" style="display: inline-block;"> 
 

 
    <input type="checkbox" value="select" align="center" id="check2"> Calculate The Number of Days When Head Counts Are Fixed<br> 
 
    <tr> 
 
     <td>Number of Head Count</td> 
 
     <td class="left"><input type="text" id="numHeadC" /></td> 
 
    </tr> 
 

 
    <tr> 
 
     <td>Number of Days</td> 
 
     <td class="left"><input type="text" name="days" id="days" /> Days</td> 
 
    </tr> 
 

 
    </table> 
 
</form>

Answer 1

テーブルは兄弟ではありません。 の書式を並べて並べる必要があります。

display: inline-blockをフォーム要素に設定します。

a validatorが受け取るエラーも修正する必要があります。たくさんのご意見をお寄せいただきありがとうございます@Quentin

Answer 2

form{ 
width: 50%; 
float: left; 
padding: 0 15px; 
}