我需要彼此相邻的两个表，一个位于页面的中心

Question

我需要彼此相邻的两张桌子，其中一张位于页面的中央，另一张位于左侧，如下所示：

我设法通过float:left和float:right在同一行上获取它们，但这并没有完全解决问题，因为这使得它们彼此相邻这样：

有什么方法可以解决这个问题吗？

Answer 1

＆＃13;

＆＃13;

*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

.conteiner{
    max-width: 960px;
    margin: 0 auto;
    border: 2px solid #000;
}
.conteiner > .table{
    display: table;
    width: 100%;
    border-spacing: 10px;    
    width: 70%;
}
.table-row{
    display: table-row;
    height: 50px;
}
.table-cell{
    display: table-cell;
    vertical-align: top;
    width: 50%;    
}
.table-item{
    display: table;
    width: 100%;
    border: 2px solid #000;
    padding: 15px;
}
.table-item-1{
    height: 110px;
}

＆＃13;

<div class="conteiner">
    
    <div class="table">
        <div class="table-row">
            <div class="table-cell"></div>
            <div class="table-cell">text text  text  text  text  text  text  text  text  text  text  text  text  text  text </div>            
        </div> 
        <div class="table-row">
            <div class="table-cell table-cell-big">
                  <div class="table-item table-item-1">
                      table 1    
                </div>   
            </div>
            <div class="table-cell">
                <div class="table-item table-item-2">
                      table 2    
                </div>
            </div>            
        </div>   
    </div>
    
</div>

＆＃13;

＆＃13;

＆＃13;