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

在css中添加td { vertical-align: top; }应该可以解决问题。

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

Answer 2

为第一个或两个td添加valign =“top”。

<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

vertical-align:top;中的用户td。简短

将“td”对齐表

3 个答案: