当使用切换显示tbody标签时，如何使用tbody背景颜色暂时重叠jQuery？

Question

我使用tbody标签对表行进行分组，以便我可以一次显示和隐藏多行。当第二个<tbody＆gt;时，切换动画可以正常工作。没有背景颜色，但是只要我添加背景颜色，背景颜色会暂时重叠边框，然后再跳回到正确的位置。这会产生不良影响，使边界在重新出现之前有效消失。

Here is an example in JS Fiddle

这是表格标签中的结构：

<tbody class='tbody1'>
    <tr class='tr1'>
        <td>Test1</td>
        <td>Test2</td>
        <td>Test3</td>
        <td>Test4</td>
    </tr>
</tbody>
<tbody class='tbody2'>
    <tr class='tr2'>
        <td>Test1</td>
        <td>Test2</td>
        <td>Test3</td>
        <td>Test4</td>
    </tr>
    <tr class='tr3'>
        <td>Test1</td>
        <td>Test2</td>
        <td>Test3</td>
        <td>Test4</td>
    </tr>
</tbody>

CSS：

body{
    background-color: rgb(228, 228, 228);;
}
table{
    border-collapse: collapse;
    border-spacing: 0;
}
.tbody{
    border: 1px solid rgba(0,0,0,0); /* to prevent border sizing inconsistency */
    background-color: rgb(243,243,243);
}
.tbody1 {
    border: 1px solid green;
}
.tbody2{
    display: none;
    border: 1px solid black;
}

jQuery：

$('.tbody1').click(function(){
    $('.tbody2').toggle(1000);
});