Javascript 如何让<；表>；保持固定高度？引导程序4

我有一个具有动态内容的表，它可以是1行或多行，最有可能是200行。用户应该能够单击一行，其他内容应该显示在另一个表列表的下面

现在，当我搜索一个项目时，表会根据找到的记录收缩，假设我有5条记录并查找1条记录，下面的整个表元素会跳起来。这不是一个好的用户体验

我知道有没有办法保持桌子或桌身的高度

这是到目前为止我的代码。你可以按“meyer”搜索

函数reservationListFunction（）{
//声明变量
var输入、过滤器、表格、tr、td、i；
输入=document.getElementById（“reservationListInput”）；
filter=input.value.toUpperCase（）；
table=document.getElementById（“reservationTable”）；
tr=table.getElementsByTagName（“tr”）；
//循环遍历所有表行，并隐藏与搜索查询不匹配的行
对于（i=0；i-1）{
匹配=真；
打破
}
}
如果（！匹配）{
tr[i].style.display=“无”；
}否则{
tr[i].style.display=“”；
}
}
}
}
jQuery（文档）.ready（函数（$）{
$（'#reservationTable tr'）。每个（函数（）{
var td_value=$（'td'，this）.eq（4）.text（）；
console.log（td_值）；
开关（td_值）{
“预期”案例：
$（this.addClass（'table-success'）；
打破
“内部”案例：
$（this.addClass（'table-info'）；
打破
个案‘已取消’：
$（this.addClass（'table-danger'）；
打破
“部分”情况：
$（this.addClass（'table-warning'）；
打破
案例“已完成”：
$（this.addClass（'table-active'）；
打破
违约：
//声明
打破
}
});
});
$（文档）.ready（函数（）{
$（“#包装器”）.toggleClass（“toggle”）；
});

名称
小屋
客人
桌子
地位
SR
出生日期
行动
阿尔弗雷德·福特基斯特
49222
14
201
预期
高级惩教主任（2）
屋宇署
签到
切换下拉列表
阿尔弗雷德·福特基斯特
49222
14
201
预期
高级惩教主任（2）
屋宇署
签到
切换下拉列表
朱莉娅·桑德斯
10293
4.
201
取消
高级惩教主任（2）
屋宇署
签到
切换下拉列表
米尔科·迈耶
13293
2.
132
部分的
高级惩教主任（2）
屋宇署
签到
切换下拉列表
阿尔弗雷德·福特基斯特
49222
14
201
预期
高级惩教主任（2）
屋宇署
签到
切换下拉列表
#reservationTable thead, #reservationTable tbody tr {
    display: table;
    width: 100%;
    table-layout: fixed;
}
#reservationTable tbody {
    height: 100px;
    table-layout: fixed;
    overflow: auto;
    display: block;
    width: 100%;
}