zoukankan      html  css  js  c++  java
  • 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;
    }
    

      

  • 相关阅读:
    stm32 SPI DMA读取ADS8345数据
    Minigui3.0.12完美安装,折腾了一天。终于看到了
    qvfb2的安装,在ubuntu10.4上安装成功
    户口从杭州人才市场迁移到武汉万科魅力之城的过程
    禁止minigui 3.0的屏幕保护
    想穿越回到儿时记录那些幸福
    TIM2定时闪灯程序。。。
    关于minigui的皮肤控件无法显示问题
    插件框架内核的设计
    用“序列图”描述技术方案
  • 原文地址:https://www.cnblogs.com/KeepThreeMunites/p/14101794.html
Copyright © 2011-2022 走看看