css - 为什么表格中的行折叠时会显示 Gap？

Question

在下面的 jsfiddle 中，我在第 2 行和第 3 行之间有一个空隙，我猜这是由于 CSS，但我不确定它为什么存在以及如何摆脱它。

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

在 Windows-10、Google Chrome 浏览器上测试。

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 类，如果两者都应用CSS collapse-row 和 collapsed 可用。

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

将您的 CSS 替换为以下 CSS，将解决您的问题。谢谢

.clickable + tr {
  display: none;
}

另一种选择是在 2nd row 中添加 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>