• div下多个table并排排列


                <!-- 双行表格 基于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;
    }
    

      

  • 相关阅读:
    prism.js——让网页中的代码更好看
    WebAPI之FormData
    ES6背记手册
    搭建本地的百度脑图
    webpack到底是干什么用的?
    浅拷贝和深拷贝
    vue 中使用 watch 的各种问题
    跳一跳外挂的python实现--OpenCV步步精深
    Opencv基础课必须掌握:滑动条做调色盘 -OpenCV步步精深
    Opencv稍微高级点的鼠标事件-OpenCV步步精深
  • 原文地址:https://www.cnblogs.com/KeepThreeMunites/p/14101794.html
Copyright © 2020-2023  润新知