1. 程式人生 > >自定義三級表格,方便資料迴圈

自定義三級表格,方便資料迴圈


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