Unable to put table next to each other - html

Question

I have read through other posts but it seems that using display:inline-block and float:left doesn't fix my problem. Here's what I have:
.leftTable {
display: inline-block;
overflow: auto;
border: solid 1px black;
width: 20%;
}
.rightTable {
display: inline-block;
overflow: auto;
border: solid 1px black;
width: 80%;
}
<table class="leftTable">
<tr>
<td>
<form action="TestMartController" method="post">
<input type="hidden" name="action" value="dairy">
<input type="image" src="<%=request.getContextPath()%>/css/categories/dairy.jpg">
</form>
</td>
</tr>
<tr>
<td>
<form action="TestMartController" method="post">
<input type="hidden" name="action" value="meat">
<input type="image" src="<%=request.getContextPath()%>/css/categories/meats.jpg">
</form>
</td>
</tr>
<tr>
<td>
<form action="TestMartController" method="post">
<input type="hidden" name="action" value="bakery">
<input type="image" src="<%=request.getContextPath()%>/css/categories/bakery.jpg">
</form>
</td>
</tr>
<tr>
<td>
<form action="TestMartController" method="post">
<input type="hidden" name="action" value="fruitveg">
<input type="image" src="<%=request.getContextPath()%>/css/categories/fruit & veg.jpg">
</form>
</td>
</tr>
</table>
<table class="rightTable">
<tr>
<th>img</th>
<th>product name</th>
<th>price</th>
<th>button</th>
</tr>
<tr>
<td></td>
</tr>
</table>
The result I got was
[leftTable]
[IMG]
[IMG]
[IMG]
[IMG]
[rightTable]
[IMG] [Product Name] [Price] [Button]
I want the desired result of
[leftTable] [rightTable]
[IMG] [IMG] [Product Name] [Price] [Button]
[IMG]
[IMG]
[IMG]
I can't seems to spot the mistake, does anyone have suggestion on how to fix this issue?

Answer 1

A simple approach might be to use display: inline-table on your two tables, since you want them to behave like inline elements.
Floats could also work but it depends on other factors in your layout.
.leftTable {
border: 1px dotted blue;
display: inline-table;
vertical-align: top;
}
.rightTable {
border: 1px dotted blue;
display: inline-table;
vertical-align: top;
}
<table class="leftTable">
<tr>
<td>
<form action="TestMartController" method="post">
<input type="hidden" name="action" value="dairy">
<input type="image" src="http://placehold.it/101x50">
</form>
</td>
</tr>
<tr>
<td>
<form action="TestMartController" method="post">
<input type="hidden" name="action" value="meat">
<input type="image" src="http://placehold.it/102x50">
</form>
</td>
</tr>
<tr>
<td>
<form action="TestMartController" method="post">
<input type="hidden" name="action" value="bakery">
<input type="image" src="http://placehold.it/103x50">
</form>
</td>
</tr>
<tr>
<td>
<form action="TestMartController" method="post">
<input type="hidden" name="action" value="fruitveg">
<input type="image" src="http://placehold.it/104x50">
</form>
</td>
</tr>
</table>
<table class="rightTable">
<tr>
<th>img</th>
<th>product name</th>
<th>price</th>
<th>button</th>
</tr>
<tr>
<td></td>
</tr>
</table>

Answer 2

Put the tables inside a container and position the containers next to each other using the float attribute in CSS.
HTML
<div class="table1_con">
<table></table>
</div>
<div class="table2_con">
<table></table>
</div>
CSS
Body, html {width:100%;}
.table1_con {width:20%;
position:absolute;
float:left;
.table2_con {
width:80%;
position:absolute;
float:left;
}
.table1_con .leftTable{
display: inline-block;
overflow: auto;
border: solid 1px black;
width: 100%;
}
.table2_con .rightTable{
display: inline-block;
overflow: auto;
border: solid 1px black;
width: 100%;
}