<!-- 雙行表格 基於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;
}