javascript - 单击事件后表格单元格无意中更改大小

Question

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