div下多个table并排排列

            <!-- 双行表格 基于css实现 -->
            <div class="tabbox">
                <div class="tabbox-1">
                    <table class="table1">
                        <tr class="table1_tr">
                            <td style="width: 25%;">XX</td>
                            <td style="width: 55%;">XX</td>
                            <td style="width: 20%;">XX</td>
                        </tr>
                        <tr class="table1_tr">
                            <td style="width: 25%;">XX</td>
                            <td style="width: 55%;">XX</td>
                            <td style="width: 20%;">XX</td>
                        </tr>
                    </table>
                </div>
                <div class="tabbox-1">
                    <table class="table1">
                        <tr class="table1_tr">
                            <td style="width: 25%;">XX</td>
                            <td style="width: 55%; background-color: red;">XX</td>
                            <td style="width: 20%;">XX</td>
                        </tr>
                        <tr class="table1_tr">
                            <td style="width: 25%;">XX</td>
                            <td style="width: 55%; background-color: red;">XX</td>
                            <td style="width: 20%;">XX</td>
                        </tr>
                    </table>
                </div>
                <div class="tabbox-1">
                    <table class="table1">
                        <tr class="table1_tr">
                            <td style="width: 25%;">X</td>
                            <td style="width: 55%; background-color: red;">100</td>
                            <td style="width: 20%;">X</td>
                        </tr>XX
                        <tr class="table1_tr">
                            <td style="width: 25%;">XX</td>
                            <td style="width: 55%; background-color: red;">XX</td>
                            <td style="width: 20%;">XX</td>
                        </tr>
                    </table>
                </div>
          </div>

　　

 

.tabbox{
    /* margin: top right down left; */
    /* margin-right: 25px; margin-top: 10px; */
	margin: 5px auto;
    width: 100%;
   	height: 70px;
    position: absolute;
    top: 100px;
   	font-size: 10px;
	background-color: none;
}
.tabbox	.tabbox-1{
	float: left;// 猜测是使表格左对齐，间接使表格并排排列在一起
    margin-left: 40px;
    margin-top: 10px;
}
/*表格属性*/
.tabbox table.table1{
    margin-top: 3px;
    margin-left: 5px;
    width: 240px; 
    height: auto; 
    border-collapse: collapse; /*单元格的边框合二为一*/
}

.tabbox .table1_tr{
    border: 5px solid #4775d1;/*给表格整行添加边框*/
    background-color: #668cff;/*表格行的背景颜色*/
}

table.table1 tr{
    text-align: left;
    margin-top: 5%;
    margin-left: 5%;
    border-collapse: collapse;
}

table.table1 td{
    text-align: left;
    margin-top: 5px;
    margin-left: 10px;
}