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

Question

我正试图像这样水平地渲染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 |
| --------- | |表2 |
| --------- | | ---------- |
| --------- | | ---------- |

我希望从头开始。

P.S。有related question，但我不想用w / div包裹它。

Answer 1

尝试添加vertical-align: top或使用float: left代替display:inline-table。

Answer 2

为什么你需要他们成为2张独立的桌子？您是否可以使用表格列

e.g。

表

Col 1 Col 2

| -------- | -------- |

| -------- | -------- |

| -------- | -------- |

| -------- | -------- |

否则两个表都使用此CSS代码：

float: left;
display: inline-block;