javascript - jQuery fadeToggle 导致表格边框出现

Question

请引用这个JSFiddle

我正在使用 tablesorter 对表格进行排序。我还在表的第一列上使用 fadeToggle 来显示/隐藏与每一行关联的隐藏行。

我希望表格的标题在每个单元格周围都有一个边框。表格的其余部分应该有 border-collapse: collapse。它在页面加载和排序时非常有用，但只要您单击以切换隐藏行，边框就会显示在所有单元格上并一直保留到您对表格进行排序。

我似乎无法找出切换后样式从何处继承...

我的 HTML 是:

      <table cellspacing=4 cellpadding=2>
    <tr>
      <td valign='top'>
    <div>
        <table id="spidtable" class='tablesorter' cellspacing=1 cellpadding=5>
          <thead>
            <th align=left style="width:100px">SPID</th>
            <th align=left style="width:200px">Name</th>
            <th align=center style="width:60px">State</th>
        <th align=center style="display:none;">&nbsp;</th>
            <th align=center style="width:100px">Duration</th>
            <th align=center style="width:100px">Transitions</th>
            <th align=center style="width:100px" title="UDM=Number of Degraded Minutes">UDM</th>
            <th align=center style="width:100px" title="UIM=Number of Interrupted Minutes">UIM</th>
          </thead>
      <tbody>
<tr class="parent-row">
 <td class="tdd" align=right>11111</td>
 <td align=left>Chief Technologies</td>
 <td align=center><a href=# onclick="pollSpid('11111')"><img border=0 src=/img/green.gif></a></td>
<td style="display:none;">1</td>
 <td align=left></td>
 <td align=right>0</td>
 <td align=right>0</td>
 <td align=right>0</td>

</tr>
 <tr class="parent-row-details expand-child" style="display:none"> <td colspan="7"> <table  class="tablesorter-child" border=1> <thead><th>Date</th><th>Time</th></thead> <tbody> <tr><td>12/1 /13</td><td>4:00AM</td></tr> <tr><td>12/1/14</td><td>7:00AM</td></tr> <tr><td>12/1/15</td>            <td>6:00AM</td></tr> </tbody> </table> </td> </tr> 
<tr class="parent-row">
 <td class="tdd" align=right>33333</td>
 <td align=left>BBBBBBBBBBB</td>
 <td align=center><a href=# onclick="pollSpid('33333')"><img border=0 src=/img/green.gif></a></td>
<td style="display:none;">1</td>
 <td align=left></td>
 <td align=right>0</td>
 <td align=right>0</td>
 <td align=right>0</td>

</tr>
 <tr class="parent-row-details expand-child" style="display:none"> <td colspan="7"> <table    class="tablesorter-child" border=1> <thead><th>Date</th><th>Time</th></thead> <tbody> <tr><td>12/1/13</td><td>4:00AM</td></tr> <tr><td>12/1/14</td><td>7:00AM</td></tr> <tr><td>12/1/15</td>  <td>6:00AM</td></tr> </tbody> </table> </td> </tr>
<tr class="parent-row">
 <td class="tdd" align=right>77777</td>
 <td align=left>ZZZZZZZZZZZ</td>
 <td align=center><a href=# onclick="pollSpid('33333')"><img border=0 src=/img/green.gif></a></td>
<td style="display:none;">1</td>
 <td align=left></td>
 <td align=right>0</td>
 <td align=right>0</td>
 <td align=right>0</td>

</tr>
 <tr class="parent-row-details expand-child" style="display:none"> <td colspan="7"> <table class="tablesorter-child" border=1> <thead><th>Date</th><th>Time</th></thead> <tbody> <tr><td>12/1/13</td><td>4:00AM</td></tr> <tr><td>12/1/14</td><td>7:00AM</td></tr> <tr><td>12/1/15</td><td>6:00AM</td></tr> </tbody> </table> </td> </tr>
<tr class="parent-row">
 <td class="tdd" align=right>44444</td>
 <td align=left>GGGGGGGGGGG</td>
 <td align=center><a href=# onclick="pollSpid('33333')"><img border=0 src=/img/green.gif></a></td>
<td style="display:none;">1</td>
 <td align=left></td>
 <td align=right>0</td>
 <td align=right>0</td>
 <td align=right>0</td>

</tr>
 <tr class="parent-row-details expand-child" style="display:none"> <td colspan="7"> <table class="tablesorter-child" border=1> <thead><th>Date</th><th>Time</th></thead> <tbody> <tr><td>12/1/13</td><td>4:00AM</td></tr> <tr><td>12/1/14</td><td>7:00AM</td></tr> <tr><td>12/1/15</td><td>6:00AM</td></tr> </tbody> </table> </td> </tr>
</tbody></table></div></td><td valign='top'><div id='divSpid'></div></td></tr></table>

我的 CSS 是:

/* tables */
table.tablesorter {
font-family:arial;
background-color: #CDCDCD;
margin:10px 0pt 15px;
font-size: 12pt;
width: 100%;
text-align: left;
border-collapse: collapse;
}
table.tablesorter thead tr th, table.tablesorter tfoot tr th {
    background-color: #e6EEEE;
    border: 1px solid #FFF;
    font-size: 8pt;
    padding: 4px;
}
table.tablesorter thead tr .header {
    background: url(http://tablesorter.com/themes/blue/bg.gif) no-repeat 99%;
    background-repeat: no-repeat;
    background-position: center right;
    cursor: pointer;
}
table.tablesorter tbody td {
    color: white;
    padding: 4px;
    background-color: #FFF;
    vertical-align: top;
}
table.tablesorter thead tr .headerSortUp {
    background: url(http://tablesorter.com/themes/blue/desc.gif) no-repeat 99%;
}
table.tablesorter thead tr .headerSortDown {
    background: url(http://tablesorter.com/themes/blue/asc.gif) no-repeat 99%;
}
table.tablesorter thead tr .headerSortDown, table.tablesorter thead tr .headerSortUp {
    background-color: #8dbdd8;
}
table.tablesorter tr.parent-row > td {
    /* IE10 Consumer Preview */
    background-image: -ms-linear-gradient(bottom, #253355 0%, #587993 100%);
    /* Mozilla Firefox */
    background-image: -moz-linear-gradient(bottom, #253355 0%, #587993 100%);
    /* Opera */
    background-image: -o-linear-gradient(bottom, #253355 0%, #587993 100%);
    /* Webkit (Safari/Chrome 10) */
    background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #253355), color-stop(1, #587993));
    /* Webkit (Chrome 11+) */
    background-image: -webkit-linear-gradient(bottom, #253355 0%, #587993 100%);
    /* W3C Markup, IE10 Release Preview */
    background-image: linear-gradient(to top, #253355 0%, #587993 100%);
}
table.tablesorter tr.parent-row-details > td {
    background: grey;
}
table.tablesorter-child thead tr th, table.tablesorter tfoot tr th {
    background-color: #e6E66E;
    border: 1px solid #FFF;
    font-size: 18pt;
    padding: 4px;
}
table.tablesorter-child tbody tr td {
    color: black;
}

Answer 1

对我来说，问题在于使用 css border-collapse 设置。为了解决这个问题，我必须将表格的 cellspacing 设置为 0。