zoukankan      html  css  js  c++  java
  • 自定义三级表格,方便数据循环


    <div class="m_table_box">
    <div class="m_table">
    <div class="m_cell m_td" style=" 100px"><b>老板</b></div>
    <div class="m_cell m_td" style=" 200px"><b>通店俱乐部名称</b></div>
    <div class="m_cell m_td"><b>已通会员卡卡种</b></div>
    </div>
    <div class="m_table">
    <div class="m_cell m_td m_vertical" style=" 100px">张三1</div>
    <div class="m_cell">
    <div class="m_table">
    <div class="m_cell m_td m_vertical" style=" 200px">
    A店1
    </div>
    <div class="m_cell">
    <div class="m_table">
    <div class="m_cell m_td">11</div>
    <div class="m_cell m_td">11</div>
    <div class="m_cell m_td">11</div>
    </div>
    <div class="m_table">
    <div class="m_cell m_td">11</div>
    <div class="m_cell m_td">11</div>
    <div class="m_cell m_td">11</div>
    </div>
    </div>
    </div>
    <div class="m_table">
    <div class="m_cell m_td" style=" 200px">
    A店1
    </div>
    <div class="m_cell">
    <div class="m_table">
    <div class="m_cell m_td">11</div>
    <div class="m_cell m_td">11</div>
    <div class="m_cell m_td">11</div>
    </div>
    <div class="m_table">
    <div class="m_cell m_td">11</div>
    <div class="m_cell m_td">11</div>
    <div class="m_cell m_td">11</div>
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>
    .m_table{
    display: table;
    100%;
    }
    .m_cell{
    display: table-cell;
    }
    .m_table_box{
    border-top:1px solid #f4f4f4;
    border-left:1px solid #f4f4f4;
    }
    .m_td{
    border-right:1px solid #f4f4f4;
    border-bottom:1px solid #f4f4f4;
    padding: 8px;
    }
    .m_vertical{
    vertical-align:middle;
    }

    
    
  • 相关阅读:
    Roce ofed 环境搭建与测试
    Ubuntu 1804 搭建NFS服务器
    Redhat 8.0.0 安装与网络配置
    Centos 8.1 安装与网络配置
    SUSE 15.1 系统安装
    VSpare ESXi 7.0 基本使用(模板、iso、SRIOV)
    VSpare ESXi 7.0 服务器安装
    open SUSE leap 15.1 安装图解
    KVM虚拟机网卡连接网桥
    GitHub Action一键部署配置,值得拥有
  • 原文地址:https://www.cnblogs.com/yuyedaocao/p/10063694.html
Copyright © 2011-2022 走看看