如何在筛选后停止表标题的自动调整

Question

这里的主要问题是，当我过滤表时，表头就像向左移动一样。就我所见，当我在第一列中搜索一个小字符串时，这是可能的，而当搜索一个长字符串时，似乎不会发生。似乎表的标题正在添加到新的列大小中，我正在努力保持标题不变，但还没有成功。

添加一些图像和我的代码

这是过滤之前的原始表格

这是过滤后的标题，我试图不显示任何信息对不起

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>

<!-- foo Region header -->
<div id="fooRegionAccordion"
class="ui-accordion-header toggle-button uppercase-text no-border-top"
data-toggle-content="contentSpaceUsageAccordion">
<a href=""><span
class="ui-accordion-header-icon ui-icon opened-accordion-icon"></span>
foo Regions </a>
</div>
<!-- foo Region body -->
<div id="" class="col-sm-12 margin-left-10">
<div id="" class="col-sm-12 no-padding">
<label class="no-margin no-padding margin-left-20"> FILTER BY
NAME/CODE </label>
</div>

<div id="fooRegionContainer" class="col-sm-12 no-padding margin-bottom-container">
<div class="col-sm-3 no-padding">
<div>
<input id="fooRegionSearch" class="input-column input-default" type="text"
name="divisonRegionSearch" maxlength="40" value="" />
</div>
</div>
<div class="col-sm-1">
<input type="button" id="search" value="SEARCH"
class="btn btn-default uppercase-text">
</div>
<div class="col-sm-1">
<input type="button" id="reset" value="RESET"
class="btn btn-default uppercase-text">
</div>
</div>

<div id="regionTableContainer" class="col-sm-12 no-padding margin-top-container">
<table class="table table-sm table-hover monitoring-table"
id="fooRegionTable">
<thead class="thead-dark no-padding">
<tr>
<th class="left-align-text" scope="col">Name</th>
<th class="left-align-text" scope="col">Code</th>
<th class="left-align-text" scope="col">Country</th>
<th class="center-align-text" scope="col">Region</th>
<th class="center-align-text" scope="col">Sub-Region</th>
</tr>
</thead>
<tbody>
<c:forEach var="foos" items="${foos}">
<tr id="fooRegionInformation" class="mtrow">
<th class=" left-align-text no-padding fooName" scope="row">${foos.name}</th>
<td class="left-align-text no-padding fooCode">${foos.code}</td>
<td class="left-align-text no-padding">${foos.country}</td>
<td class="center-align-text no-padding">${foos.region}</td>
<td class="center-align-text no-padding">${foos.subregion}</td>
</tr>
</c:forEach>
</tbody>
</table>
</div>
</div>
<script type="text/javascript">
$('#fooRegionSearch').on('keydown keypress', (function(e) {
if (event.keyCode == 13 || event.which == 13) {
$("#search").click();
}
}));
$("#search").click(function() { 
var value = $("#fooRegionSearch").val();
var rows = $("#fooRegionTable").find("tr");
var firstRow = $("tr:first");
rows.hide();
rows.filter((_, row) => $(row).find('.fooName, .fooCode').filter(":contains('"+ value.toUpperCase() +"')").length
).show(); 
firstRow.show();
});
$("#reset").click(function() {
var value = $("#fooRegionSearch").val();
var rows = $("#fooRegionTable").find("tr");
$('#fooRegionSearch').val('');
rows.show();
});
</script>

Answer 1

制作表格布局：固定；工作。我知道这是一个很容易解决的问题，但我会把它留着，以防有人来这里