Question

在下面的jsfiddle中，第二行和第三行之间存在间隙，我想这是由于CSS引起的，但我不确定为什么会出现这种情况以及如何消除它。

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

在Windows-10和Google Chrome浏览器上进行了测试。

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

为什么在表中的行折叠时显示间隙？

2 个答案: