Почему Gap Показывает, когда строки свернуты в таблице?

Question

В jsfiddle ниже у меня есть промежуток между 2-й и 3-й строками, я думаю, что это связано с CSS, но я не уверен, почему он существует и как от него избавиться.

Если я переместу 2-ю строку, чтобы она стала последней, пробел исчезнет, ​​но я хочу сохранить текущий порядок строк.

Проверено на Windows-10, браузере Google Chrome.

JsFiddle с кодом проблемы

CSS:

.collapse-row.collapsed+tr {
  display: none;
}

HTML:

<table class="table table-hover">
  <thead>
    <th>1</th>
    <th>2</th>
    <th>3</th>
    <th>4</th>
    <th>5</th>
    <th>6</th>
  </thead>
  <tbody>
    <tr data-toggle="collapse" data-target="#accordion" class="clickable collapse-row collapsed">
      <td>r1</td>
      <td>Some more stuff</td>
      <td>And some more</td>
      <td>4</td>
      <td>5</td>
      <td>6</td>
    </tr>
    <tr>
      <td colspan="6">
        <div id="accordion" class="collapse">Hidden by default 1</div>
      </td>
    </tr>
    <tr data-toggle="collapse" data-target="#accordion2" class="clickable">
      <td>r2</td>
      <td>Some more stuff</td>
      <td>And some more</td>
      <td>4</td>
      <td>5</td>
      <td>6</td>
    </tr>
    <tr>
      <td colspan="6">
        <div id="accordion2" class="collapse">Hidden by default 2</div>
      </td>
    </tr>
    <!-- Problem is between the above and below rows -->
    <tr data-toggle="collapse" data-target="#accordion15" class="clickable collapse-row collapsed">
      <td>r3-Design Data Model</td>
      <td>Feb-22-2019</td>
      <td>Mar-01-2019</td>
      <td>8</td>
      <td>xxx</td>
      <td>+</td>
    </tr>
    <tr>
      <td colspan="6">
        <div id="accordion15" class="collapse">Hidden by default 3 </div>
      </td>
    </tr>
  </tbody>
</table>

Answer 1

На самом деле 2-я строка не содержит collapse-row и collapsed класса, и вы применяете CSS, если доступны оба collapse-row и collapsed.

.collapse-row.collapsed + tr {
  display: none;
}

Замените свой CSSс помощью приведенного ниже CSS, решит вашу проблему.Спасибо

.clickable + tr {
  display: none;
}

Другой вариант, вы просто добавляете collapse-row collapsed классы в 2-й ряд

<tr data-toggle="collapse" data-target="#accordion2" class="clickable collapse-row collapsed">
   <td>r2</td>
   <td>Some more stuff</td>
   <td>And some more</td>
   <td>4</td>
   <td>5</td>
   <td>6</td> 
</tr>

Answer 2

Пожалуйста, добавьте collapsed collapse-row класс во второй строке <tr> так же, как два других.По умолчанию display: none; CSS не применяется к этому, поэтому он занимает место.