скрытие/показ строки таблицы разрывает макет

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}, чтобы скрыть или отобразить элементы - это Haide содержания, но сохранить свое место в DOM и не вызывает переформатирование/переформатирование, что DISPLY: никто не вызывает.

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