Я создал таблицу divs
с CSS
, которая состоит из родительского rows
и дочернего rows
, но я хочу, чтобы дочерний элемент rows
сделал их видимыми или скрыл с помощью vuejs
. Моя проблема не в том, как сделать их видимыми / скрытыми, как правильно выровнять родителей с детьми.
В моем примере ребенок row
должен находиться между родителями row
два и три, но ребенок row
отображается над родителем row
с номером 3.
В приведенном ниже примере неровности можно увидеть намного лучше в полноэкранном режиме.
Спасибо!
.div-table {
display: table;
width: 100%;
table-layout: auto;
font-size: 12px;
color: black;
}
.div-table-head {
display: table-header-group;
background: #e5e5e5;
vertical-align: middle;
}
.div-table-body {
display: table-row-group;
vertical-align: middle;
}
.div-table-tr {
display: table-row;
}
.div-table-th {
display: table-cell;
font-weight: 700;
text-transform: uppercase;
border-bottom: 3px solid #666;
}
.div-table-td {
display: table-cell;
border-bottom: 1px solid #e5e5e5;
}
.div-table-th, .div-table-td {
padding: 6px;
}
.div-table-tr:nth-of-type(odd) {
background: #f8f8f8;
border-top: 1px solid #e5e5e5;
border-bottom: 1px solid #e5e5e5;
}
.div-table-tr:hover {
background: #ffd;
}
.my-material-icons {
font-size: 13px;
color: gray;
cursor: pointer;
}
.col-span {
position: absolute;
padding: 0;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.3.1/css/uikit.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/material-design-icons/3.0.1/iconfont/material-icons.min.css" rel="stylesheet"/>
<div class='div-table'>
<div class='div-table-head'>
<div class='div-table-th' style="width: 3%">#</div>
<div class='div-table-th' >th2</div>
<div class='div-table-th' >th3</div>
</div>
<div class='div-table-body'>
<!-- parent -->
<div class='div-table-tr'>
<div class='div-table-td'>1 <i title="title" class="material-icons my-material-icons">arrow_drop_down_circle</i></div>
<div class='div-table-td'>td12</div>
<div class='div-table-td'>td13</div>
</div>
<!-- parent -->
<div class='div-table-tr'>
<div class='div-table-td'>2 <i title="title" class="material-icons my-material-icons">arrow_drop_down_circle</i></div>
<div class='div-table-td'>td22</div>
<div class='div-table-td'>td23</div>
</div>
<!-- child -->
<div class='div-table-tr'>
<div class='div-table-td col-span'>
<div class='div-table'>
<div class='div-table-head'>
<div class='div-table-th' style="width: 4%">#</div>
<div class='div-table-th' >th2</div>
<div class='div-table-th' >th3</div>
</div>
<div class='div-table-body'>
<div class='div-table-tr'>
<div class='div-table-td'>1 <i title="title" class="material-icons my-material-icons">arrow_drop_down_circle</i></div>
<div class='div-table-td'>td12</div>
<div class='div-table-td'>td13</div>
</div>
<div class='div-table-tr'>
<div class='div-table-td'>2 <i title="title" class="material-icons my-material-icons">arrow_drop_down_circle</i></div>
<div class='div-table-td'>td22</div>
<div class='div-table-td'>td23</div>
</div>
</div>
</div>
</div>
</div>
<!-- parent -->
<div class='div-table-tr'>
<div class='div-table-td'>3 <i title="title" class="material-icons my-material-icons">arrow_drop_down_circle</i></div>
<div class='div-table-td'>td32</div>
<div class='div-table-td'>td33</div>
</div>
</div>
</div>