Align “td”s in a table

Question

I have a design like this.

<table>
<tr>
 <td style="width: 50%">
  <table id="table1">
   <tr><td></td></tr>
   <tr><td></td></tr>
   .
   .
   <tr><td></td></tr>
  </table>
 </td>
 <td style="width: 50%">
  <table id="table2">
   <tr><td></td></tr>
   <tr><td></td></tr>
   .
   .
   .
   .
   .
   .
   <tr><td></td></tr>
  </table>
 </td>
</tr>
</table>

Here Table1 is shorter than table2 as there are fewer rows in table1, As a result, I am getting the table in middle of the main td, not at top. I cant give padding-bottom or margin bottom for table1 as for some conditions table1 may grow longer. I need to get the table1 at top. Please help me out.

Answer 1

Adding td { vertical-align: top; } td { vertical-align: top; } in css should do the trick.

https://jsfiddle.net/julysfx/peh32tya/

Answer 2

Add valign="top" for first or both td's.

<table width="100%">
<tr>
 <td valign="top" style="width: 50%">
  <table id="table1">
   <tr><td></td></tr>
   <tr><td></td></tr>
   .
   .
   <tr><td></td></tr>
  </table>
 </td>
 <td valign="top" style="width: 50%">
  <table id="table2">
   <tr><td></td></tr>
   <tr><td></td></tr>
   .
   .
   .
   .
   .
   .
   <tr><td></td></tr>
  </table>
 </td>
</tr>
</table>

Answer 3

User vertical-align:top; in td . Short and Simple