自定义三级表格,方便数据循环


<div class="m_table_box">
<div class="m_table">
<div class="m_cell m_td" style="width: 100px"><b>老板</b></div>
<div class="m_cell m_td" style="width: 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="width: 100px">张三1</div>
<div class="m_cell">
<div class="m_table">
<div class="m_cell m_td m_vertical" style="width: 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="width: 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;
width: 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;
}

 


posted @ 2018-12-04 13:48  雨夜稻草  阅读(323)  评论(0编辑  收藏  举报