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;
    }
    

      

  • 相关阅读:
    Python 爬取网易云歌手的50首热门作品
    对于AES和RSA的个人理解
    sqlzoo
    项目部署 uwsgi+nginx+crm
    nginx学习
    redis补充知识--- 缓存击穿、缓存雪崩、缓存穿透
    redis-cluster 搭建
    redis主从复制
    redis-sentinel (哨兵)
    redis 发布订阅
  • 原文地址:https://www.cnblogs.com/KeepThreeMunites/p/14101794.html
Copyright © 2011-2022 走看看