展开和折叠表格行会弄乱背景行颜色

Question

我有一个简单的脚本来展开和折叠我的表行

<script>
    $('.header').click(function(){
    $(this).find('i').toggleClass('fa-minus-square-o fa-plus-square-o');
    $(this).nextUntil('tr.header').slideToggle(100, function(){
    });
});
</script>

这是我的表格的HTML代码

<table class="table compare-table">
  <thead>
    <th class="text-center"><i class="fa fa-chevron-circle-left scroll-icon" aria-hidden="true"></i></th>
    <th>
        <span><a class="remove-item"><i class="fa fa-close iconBasefont"></i> Remove</a></span>
        <h6 class="no-margin-b">Johanson</h6>
        <h4 class="nomargins">202R18W102KV4E</h4>
    </th>
    <th>
        <span><a class="remove-item"><i class="fa fa-close iconBasefont"></i> Remove</a></span>
        <h6 class="no-margin-b">Samsung</h6>
        <h4 class="nomargins">  CL10A225MP8NNNC</h4>
    </th>
    <th>
        <span><a class="remove-item"><i class="fa fa-close iconBasefont"></i> Remove</a></span>
        <h6 class="no-margin-b">Murata</h6>
        <h4 class="nomargins">  GRM188R61A225ME34D</h4>
    </th>
    <th>
        <span><a class="remove-item"><i class="fa fa-close iconBasefont"></i> Remove</a></span>
        <h6 class="no-margin-b">TDK</h6>
        <h4 class="nomargins">  C1608X5R1A225M</h4>
    </th>
    <th class="text-left"><i class="fa fa-chevron-circle-right scroll-icon" aria-hidden="true"></i></th>
  </thead>
  <tr class="header">
      <th colspan="6"><i class="fa fa-minus-square-o"></i> General Information </th>
  </tr>
  <tr>
    <td>Description</td>
    <td>Part desc</td>
    <td>Part desc</td>
    <td>Part desc</td>
    <td>Part desc</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>Datasheet</td>
    <td><i class="fa fa-pdf-file"></i> <a href="#">Datasheet</a></td>
    <td><i class="fa fa-pdf-file"></i> <a href="#">Datasheet</a></td>
    <td><i class="fa fa-pdf-file"></i> <a href="#">Datasheet</a></td>
    <td><i class="fa fa-pdf-file"></i> <a href="#">Datasheet</a></td>
    <td>&nbsp;</td>
  </tr>
  <tr  class="header">
    <th colspan="6"><i class="fa fa-minus-square-o"></i> Electrical Information </th>
  </tr>
  <tr>
    <td>Some details</td>
    <td><i class="fa fa-pdf-file"></i> <a href="#">Datasheet</a></td>
    <td><i class="fa fa-pdf-file"></i> <a href="#">Datasheet</a></td>
    <td><i class="fa fa-pdf-file"></i> <a href="#">Datasheet</a></td>
    <td><i class="fa fa-pdf-file"></i> <a href="#">Datasheet</a></td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>Another Attribute</td>
    <td><i class="fa fa-pdf-file"></i> <a href="#">Datasheet</a></td>
    <td><i class="fa fa-pdf-file"></i> <a href="#">Datasheet</a></td>
    <td><i class="fa fa-pdf-file"></i> <a href="#">Datasheet</a></td>
    <td><i class="fa fa-pdf-file"></i> <a href="#">Datasheet</a></td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>Datasheet</td>
    <td><i class="fa fa-pdf-file"></i> <a href="#">Datasheet</a></td>
    <td><i class="fa fa-pdf-file"></i> <a href="#">Datasheet</a></td>
    <td><i class="fa fa-pdf-file"></i> <a href="#">Datasheet</a></td>
    <td><i class="fa fa-pdf-file"></i> <a href="#">Datasheet</a></td>
  </tr>
    <tr>
    <td>Another Attribute</td>
    <td><i class="fa fa-pdf-file"></i> <a href="#">Datasheet</a></td>
    <td><i class="fa fa-pdf-file"></i> <a href="#">Datasheet</a></td>
    <td><i class="fa fa-pdf-file"></i> <a href="#">Datasheet</a></td>
    <td><i class="fa fa-pdf-file"></i> <a href="#">Datasheet</a></td>
    <td>&nbsp;</td>
  </tr>
    <tr>
    <td>Another Attribute</td>
    <td><i class="fa fa-pdf-file"></i> <a href="#">Datasheet</a></td>
    <td><i class="fa fa-pdf-file"></i> <a href="#">Datasheet</a></td>
    <td><i class="fa fa-pdf-file"></i> <a href="#">Datasheet</a></td>
    <td><i class="fa fa-pdf-file"></i> <a href="#">Datasheet</a></td>
    <td>&nbsp;</td>
  </tr>
</table>

以下是表行背景的css

.compare-table{
  tr{
    td:first-child{
        border-right:3px solid #e0e0e0!important;
    }
    &:first-child{
    background-color: #fff;
    }
    &:nth-of-type(odd){
    background-color: #fff;
    }
    &:nth-of-type(even){
    background-color:#F5F5F5;
    }
    &.header{
    background: #E9F3FF!important;
    border-bottom: 2px solid #4A90E2;
     cursor: pointer;
    }
  }
}

现在，我面临的问题是，当表格之间的行标题展开或折叠时，背景颜色会变得混乱。