隱藏/顯示一個錶行中斷佈局

Question

我想隱藏和顯示錶行，下面的工作，但打破布局，即空<td> s失去其寬度有沒有辦法來防止這種？

$(document).on("click ", "tr.grey", function(e) { 
 
    e.preventDefault(); 
 
    $("tr.sales-details").removeClass("show"); 
 
    $(this).nextUntil(".grey").addClass("show"); 
 
});

tbody tr.sales-details, tbody tr.sales-details-title{ 
 
    display: none; 
 
    &.show{ 
 
    display: block; 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table width="100%" class="modal-table" id="modal-table"> 
 
    <thead> 
 
    <tr><th>Surgeon name</th> 
 
     <th>Country</th> 
 
     <th>Antiquity</th> 
 
     <th>Amount</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr class="grey"> 
 
     <td>Alex Lloyd</td> 
 
     <td>Spain</td> 
 
     <td>new client</td> 
 
     <td>2690.58 USD</td> 
 
    </tr> 
 
    <tr class="sales-details-title"> 
 
     <td></td> 
 
     <td></td> 
 
     <td><strong>Seller:</strong></td> 
 
     <td><strong>Percentage:</strong></td> 
 
    </tr> 
 
    <tr class="sales-details"> 
 
     <td></td> 
 
     <td></td> 
 
     <td>Support</td> 
 
     <td>2690.58 USD</td> 
 
    </tr> 
 
    </tbody> 
 
</table>

Answer 1

嘗試使用{visibility:hidden}和{visibility:visible}隱藏或顯示的元素 - 這將海德的內容，但保留其發生在DOM和不會引起迴流/重新格式化DISPLY：無原因。

tbody tr.sales-details, tbody tr.sales-details-title{ 
    visibility: hidden; 
    &.show{ 
    visibility:visible; 
    } 
}