How to render 2 html tables next to each other?

Question

I'm trying to render 2 tables next to each other horizontally like this:

|Table 1| |Table 2|
|---------| |----------|
|---------| |----------|
|---------| |----------|

What is proper way to do that?

---

Currently, I got this html:

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

Having troubles with vertical alignment, it renders out like this (table#2 has 1 less row):

|Table 1|
|---------| |Table 2|
|---------| |----------|
|---------| |----------|

I would like it to start from top.

P.s. There is related question, but I don't want to wrap it around w/ divs.

Answer 1

Try adding vertical-align: top or using float: left instead of display:inline-table.