javascript - 表格单元格在单击事件后意外更改大小

Question

我正在使用 JS 动态构建一个表格，但是由于某种原因，在单击btn_dropdown0应该隐藏和显示的“按钮”后，tbody按钮本身会左右稍微移动。在检查我的代码行为后，原因是两个空白th正在调整大小，可能是因为当可见时tbody，下面一行的单元格包含一些数据，因此它们被拉伸了。
这是我复制的表和处理效果的 jQuery：

$('#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

将宽度添加到th，它将保持在相同的位置。由于没有宽度，th所以它是根据内容大小而定的。现在，当您单击它时，由于滚动条而闪烁。在整页模式下检查它。

$('#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>