对齐表格中的“td”答案

【问题标题】：Align "td"s in a table对齐表格中的“td”
【发布时间】：2017-12-16 03:27:01
【问题描述】：

我有这样的设计。

<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 放在顶部。请帮帮我。

【问题讨论】：

标签： css asp.net html html-table

【解决方案1】：

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

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

【讨论】：

这可以将所有 td 对齐到顶部 :)
是的，我以为他无论如何都希望将所有 td 都放在首位，但是说实话，您的解决方案看起来更好
你的也不错，但如果已经在使用 CSS，最好为特定的 td 添加一个类。

【解决方案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>

【讨论】：

【解决方案3】：

td 中的用户 vertical-align:top;。短小精悍

【讨论】：