Question

我有两个使用以下语法水平对齐的表：

<table width=100%>
  <tr>
    <td><table1 code goes here>
    </td>
    <td><table2 code goes here>
    </td>
  </tr>
</table>

这一切都很好，花花公子，如果表格的数据行数相同，它们会对齐。但如果一个比另一个少，那么它们仍然在相同的位置对齐，但另一个表缩小了，所以它们看起来像：

header
data
data
data    header
data    data
data    data
data    data
data
data

有没有办法让他们从上到下对齐？

像

header    header
data      data
data      data
data      data
data
data
data
data
data

我该如何解决这个问题？

Answer 1

您可以使用valign = top。

<table width=100%> 
  <tr> 
    <td valign="top"><table1 code goes here>
    </td>
    <td valign="top"><table2 code goes here>
    </td>
  </tr>
</table>

Answer 2

如果使用CSS

，则需要为每个表使用display: inline-block;

否则，您可以为HTML

中的两个表添加<td valign="top">

Answer 3

添加<td valign="top">肯定会解决您的问题。此标签垂直对齐顶部的内容，使其贴在顶行。

同样，您也可以根据需要使用其他一些值进行valign。他们是：

baseline
middle
bottom

水平对齐两个表格HTML / CSS

3 个答案: