css - 在表中对齐 "td"s

Question

我有一个这样的设计。

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

这里 Table1 比 table2 短，因为 table1 中的行数较少，因此，我将表放在主 td 的中间，而不是顶部。我无法为 table1 提供 padding-bottom 或 margin Bottom，因为在某些情况下 table1 可能会变长。我需要将 table1 放在顶部。请帮帮我。

Answer 1

添加 td { 垂直对齐:顶部； } 在 css 中应该可以解决问题。

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