为什么Gap显示何时在表中折叠行？

Question

在下面的jsfiddle我有第二和第三行之间的差距，我想这是由于CSS，但我不知道为什么它在那里以及如何摆脱它。

如果我将第2行移动到最后一行，则间隙消失，但我想保持当前的行顺序。

在Windows-10，谷歌浏览器浏览器上测试。

JsFiddle with problem code

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

实际上第二行不包含collapse-row和collapsed类，如果collapse-row和collapsed都可用，你应用CSS。

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

用下面的CSS替换你的CSS，将解决你的问题。谢谢

.clickable + tr {
  display: none;
}

您可以在第二行添加collapse-row collapsed类的另一个选项

<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不适用于那就是它占用空间的原因。