水平对齐两个表格 HTML/CSS答案

【问题标题】：Align two tables horizontally HTML/CSS水平对齐两个表格 HTML/CSS
【发布时间】：2017-10-27 21:14:37
【问题描述】：

我有两个使用这种语法水平对齐的表格：

<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

我该如何解决这个问题？

【问题讨论】：

在您的示例代码中，您只有一个表，即使您说表 1 代码放在这里而表 2 代码放在这里，这都在一个表中。

标签： html css

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

【讨论】：

是的，正是我在做什么！谢谢@Tricky12！
你打败了我，所以我想我会参与 :-)
不用担心@user3979986！如果你使用 CSS 来做那种事情会更好。另一种方法是在同一行中放置 2 个 div，并将表格放在每个 div 中。
谢谢 :-) 帮了我很多忙
HTML5 不再支持valign 属性；使用float:left 的CSS 样式是更合适的解决方案

【解决方案2】：

如果使用 CSS，您需要为每个表格使用 display: inline-block;

否则，您可以在 HTML 中为两个表格添加 <td valign="top">

【讨论】：

【解决方案3】：

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

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

baseline
middle
bottom

【讨论】：