Table cells unintentionally change size after a click event

Question

I am dynamically building a table using JS but, for some reason, after clicking on the btn_dropdown0 "button", which is supposed to hide and show the tbody , the button itself gets slightly moved left and right. The reason for this, after inspecting my code behavior, is that the two blank th are resizing, probably due to the fact that when the tbody is visibile, the cells on the row below contain some data and so they get stretched.
This is my table replicated and the jQuery handling the effects:

 $('#btn_dropdown0').click(function() { if($(this).css('transform') == 'matrix(-1, 0, 0, -1, 0, 0)'){ $(this).css({'transform': ''}); $('#tbody0').hide(); }else{ $(this).css({'transform': 'rotate(180deg)'}); $('#tbody0').show(); } }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <table class="table table-hover text-center"> <thead class="thead-dark"> <tr> <th scope="col">Bangkok</th> <th scope="col">Milan</th> <th scope="col">Flight type: international</th> <th scope="col"></th> <th scope="col"></th> <th scope="col"><i class="fas fa-chevron-circle-down" id="btn_dropdown0"></i></th> </tr> </thead> <tbody id="tbody0" style="display: none;"> <tr> <td>Monday</td> <td>15:00</td> <td>16:00</td> <td>Supported airplanes: 1,4,5</td> <td><button class="btn btn-info">Reserve</button></td> </tr> <tr> <td>Tuesday</td> <td>22:00</td> <td>23:00</td> <td>Supported airplanes: 1,4,5</td> <td><button class="btn btn-info">Reserve</button></td> </tr> </tbody> </table> 

Answer 1

Add width to th , it will remain in same position. As there is no width to th so it is taking according to content size in it. Now when you click it is flickering due to scrollbar. Check it in full page mode.

 $('#btn_dropdown0').click(function() { if($(this).css('transform') == 'matrix(-1, 0, 0, -1, 0, 0)'){ $(this).css({'transform': ''}); $('#tbody0').hide(); }else{ $(this).css({'transform': 'rotate(180deg)'}); $('#tbody0').show(); } }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <table class="table table-hover text-center"> <thead class="thead-dark"> <tr> <th scope="col" width="15%">Bangkok</th> <th scope="col" width="15%">Milan</th> <th scope="col" width="45%">Flight type: international</th> <th scope="col" width="10%"></th> <th scope="col" width="10%"></th> <th scope="col"><i class="fas fa-chevron-circle-down" id="btn_dropdown0"></i></th> </tr> </thead> <tbody id="tbody0" style="display: none;"> <tr> <td>Monday</td> <td>15:00</td> <td>16:00</td> <td>Supported airplanes: 1,4,5</td> <td><button class="btn btn-info">Reserve</button></td> </tr> <tr> <td>Tuesday</td> <td>22:00</td> <td>23:00</td> <td>Supported airplanes: 1,4,5</td> <td><button class="btn btn-info">Reserve</button></td> </tr> </tbody> </table>