Увеличить высоту div, не сдвигая другие элементы ниже? - PullRequest
Новая
       7

Увеличить высоту div, не сдвигая другие элементы ниже?

0 голосов
/ 16 апреля 2020

У меня есть настройка forEach l oop, которая создает 1 линейную потоковую диаграмму для каждой записи в коллекции mongoDB. Поскольку многие записи имеют одну и ту же первую запись (на скриншоте, первые 7 потоковых диаграмм начинаются с «PSUP»), поэтому я пытаюсь настроить его так, чтобы при повторении отображался только 1 заголовок. Я не могу понять, как увеличить высоту, чтобы покрыть остальные места с тем же названием. Извините, это сложно описать, но у меня есть скриншот:

Я пытался установить высоту вручную, но затем толкает остальные блок-схемы ниже. Кто-нибудь знает, как это исправить?

enter image description here

РЕДАКТИРОВАНИЕ с предложением представленного ответа 

 <!-- Check if repeating; count number of times it repeats -->
 <% 
 var currentCol1 = "", count = 1;
 for (i = environments.length - 1; i >= 0; i--){
   if (environments[i].col1 == currentCol1){
     count++;
   } else {
     count = 1;
   }
   currentCol1 = environments[i].col1;
   environments[i].count = count;
 }
 currentCol1 = ""; %>

<!-- start loop through mongoDB collection: environments -->
<table class="environment" >
  <% environments.forEach(function(environment){ %>
    <tr>
      <% if (currentCol1 != environment.col1){ %>
        <td rowspan="<%= environment.count %>"><%= environment.col1 %></td>
      <% } %>

      <td><%= environment.col2 %></td>
      <td><%= environment.col3 %></td>
      <td><%= environment.col4 %></td>
      <td><%= environment.col5 %></td>
      <td><%= environment.col6 %></td>
      <td><%= environment.col6 %></td>
      <td><%= environment.col8 %></td>
      <td><%= environment.col9 %></td>
      <td><%= environment.col10 %></td>

      <% currentCol1 = environment.col1;

    }); %> 
    </tr>
</table>

css: 

.environment td::after {
    position: absolute;
    font-size:0;
    width:45px;
    height:1px;
    color:#fff;
    background-color:#000;    
    margin-top:20px;
    float:left;
    content: "test"
 } 


.environment td{
    border: 1px solid black;
    padding: 3px;
    font-size: 0.9rem;
    font-weight: bold;
    margin-right: 20px;
    text-align: center;
    line-height: 2.8;
}

теперь это выглядит так: enter image description here

...