Html 无法将表相邻放置

我已经阅读了其他文章，但是使用

display:inline block

和

float:left

似乎并不能解决我的问题。以下是我所拥有的：

.leftTable{
显示：内联块；
溢出：自动；
边框：实心1px黑色；
宽度：20%；
}
.右表{
显示：内联块；
溢出：自动；
边框：实心1px黑色；
宽度：80%；
}

img
产品名称
价格
按钮

将表放在一个容器中，并使用CSS中的

float

属性将容器相邻放置

HTML

---

一种简单的方法可能是在两个表上使用

display:inline table

，因为您希望它们的行为类似于内联元素

浮动也可以工作，但这取决于布局中的其他因素

.leftTable{
边框：1px点蓝色；
显示：内联表；
垂直对齐：顶部；
}
.右表{
边框：1px点蓝色；
显示：内联表；
垂直对齐：顶部；
}

img
产品名称
价格
按钮

<div class="table1_con">
<table></table>
</div>

<div class="table2_con">
<table></table>
</div>

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%;
}