Jak renderować 2 tabele html obok siebie?

Question

Próbuję renderować 2 stoły obok siebie w poziomie:

| Tabela 1 | Tabela 2 |
| --------- | | ---------- |
| --------- | | ---------- |
| --------- | | ---------- |

Co to jest właściwy sposób?

---

Obecnie mam to HTML:

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

kłopoty z pionowym ustawieniu, to czyni się następująco (tabela nr 2 ma 1 mniej wiersz):

| Tabela 1 |
| --------- | Tabela 2 |
| --------- | | ---------- |
| --------- | | ---------- |

Chciałbym zacząć od góry.

P.s. Istnieje related question, ale nie chcę go owijać w/divs.

Answer 1

Spróbuj dodać vertical-align: top lub użyj float: left zamiast display:inline-table.

Answer 2

Dlaczego potrzebne są 2 osobne tabele? Czy nie można użyć kolumn tabeli zamiast:

np.

Tabela

Col 1 Col 2

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

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

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

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

inaczej mają obie tabele przy użyciu tego kodu CSS:

float: left; 
display: inline-block;