Ausrichten "td" s in einer Tabelle

Question

Ich habe ein Design wie folgt.

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

Hier ist Tabelle 1 kürzer als table2, da es weniger Zeilen in Tabelle 1 sind, Als Ergebnis erhalte ich die Tabelle in der Mitte der Haupt td, nicht an der Spitze. Ich kann nicht padding-bottom oder margin bottom für table1 geben, da für einige Bedingungen table1 länger werden kann. Ich muss den Tisch1 oben bekommen. Bitte hilf mir.

Answer 1

Hinzufügen td { vertical-align: top; } in CSS sollte den Trick tun.

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

Answer 2

valign = "top" für die erste hinzufügen oder beide TDs.

<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

Benutzer vertical-align:top; in td. Kurz und einfach