如何渲染2个html表彼此相邻？

我试图像这样水平渲染2个表：

|表1 | |表2 |
| ——— | | ———- |
| ——— | | ———- |
| ——— | | ———- |

这样做的正确方法是什么？

目前,我得到了这个HTML：

<div style="vertical-align:top;">
 <table style="display:inline-table;">
  ...1st table
 </table>
 <table  style="display:inline-table;">
  ...2nd table
 </table>
</div>

有垂直对齐的麻烦,它会像这样呈现出来(表#2少了1行)：

|表1 |
| ——— | |表2 |
| ——— | | ———- |
| ——— | | ———- |

我希望它从顶部开始.

附：有related question,但我不想用w / div包裹它.

解决方法

尝试添加vertical-align：top或使用float：left而不是display：inline-table.