<!-- 双行表格 基于css实现 --> <div class="tabbox"> <div class="tabbox-1"> <table class="table1"> <tr class="table1_tr"> <td style=" 25%;">XX</td> <td style=" 55%;">XX</td> <td style=" 20%;">XX</td> </tr> <tr class="table1_tr"> <td style=" 25%;">XX</td> <td style=" 55%;">XX</td> <td style=" 20%;">XX</td> </tr> </table> </div> <div class="tabbox-1"> <table class="table1"> <tr class="table1_tr"> <td style=" 25%;">XX</td> <td style=" 55%; background-color: red;">XX</td> <td style=" 20%;">XX</td> </tr> <tr class="table1_tr"> <td style=" 25%;">XX</td> <td style=" 55%; background-color: red;">XX</td> <td style=" 20%;">XX</td> </tr> </table> </div> <div class="tabbox-1"> <table class="table1"> <tr class="table1_tr"> <td style=" 25%;">X</td> <td style=" 55%; background-color: red;">100</td> <td style=" 20%;">X</td> </tr>XX <tr class="table1_tr"> <td style=" 25%;">XX</td> <td style=" 55%; background-color: red;">XX</td> <td style=" 20%;">XX</td> </tr> </table> </div> </div>
.tabbox{ /* margin: top right down left; */ /* margin-right: 25px; margin-top: 10px; */ margin: 5px auto; 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; 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; }