создать таблицу из div со скрытыми строками с CSS - PullRequest
0 голосов
/ 13 февраля 2020

Я создал таблицу 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>

1 Ответ

0 голосов
/ 13 февраля 2020

Прежде чем использовать метки div для создания таблицы, вы должны использовать vuejs разметку https://vuejs.org/v2/examples/grid-component.html

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...