如何在表格行数超过5行时为table body添加滚动条？

嘿，这个需求太贴合实际了——固定tbody高度确实会在数据少的时候让表格看起来松垮垮的，完全懂你的痛点！咱们可以通过动态计算行数+结合CSS的max-height来实现，既不固定死高度，又能在内容超5行时自动出现滚动条。

解决方案步骤 #

1. 调整CSS样式 #

先给tbody准备基础样式，默认自适应高度，当满足条件时再启用滚动：

/* 基础样式：tbody自适应高度，默认不显示滚动 */
#myTable {
  display: block;
  width: 100%;
  overflow-y: hidden;
  /* 保持表格列与thead对齐，避免滚动时列错位 */
  table-layout: fixed;
}
/* 当行数超过5行时添加的滚动类 */
#myTable.scrollable {
  max-height: calc(5 * var(--row-height));
  overflow-y: auto;
}
/* 确保thead和tbody的列宽度一致 */
.table thead tr {
  display: table;
  width: 100%;
  table-layout: fixed;
}
#myTable tr {
  display: table;
  width: 100%;
  table-layout: fixed;
}

这里把thead和tbody设置为display: block是为了让tbody能独立滚动，table-layout: fixed保证列宽和表头完全对齐，避免滚动时出现列错位的问题。

2. 添加JavaScript逻辑 #

需要在页面加载完成、数据更新（比如搜索过滤后）时，动态判断行数并控制滚动类：

$(document).ready(function(){
  // 封装判断滚动状态的函数，方便复用
  function toggleTableScroll() {
    const tbody = $('#myTable');
    // 统计可见行数（考虑搜索过滤后的隐藏行）
    const visibleRowCount = tbody.find('tr:visible').length;
    // 获取单行的实际高度（包含内边距、边框）
    const singleRowHeight = tbody.find('tr').first().outerHeight();
    
    // 设置CSS变量，用于计算5行的总高度
    tbody.css('--row-height', `${singleRowHeight}px`);
    
    // 根据行数判断是否启用滚动
    if (visibleRowCount > 5) {
      tbody.addClass('scrollable');
    } else {
      tbody.removeClass('scrollable');
    }
  }

  // 页面初始化时执行一次
  toggleTableScroll();

  // 搜索过滤后重新检查行数
  $("#myInput").on("keyup", function() {
    var value = $(this).val().toLowerCase();
    $("#myTable tr").filter(function() {
      $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1);
    });
    // 过滤完成后重新判断滚动状态
    toggleTableScroll();
  });
});

这里用tr:visible统计行数，是因为搜索过滤后有些行会被隐藏，这时候也要根据可见行数来调整滚动状态。通过动态获取单行高度，计算出5行的总高度作为max-height，这样内容超过时自动出现滚动条，不足时tbody就自适应高度，不会出现多余的空白。

3. 整合到你的代码中 #

把上面的CSS代码放到<head>标签内的<style>中，替换原来的JavaScript代码即可。测试一下：当表格只有3行时，tbody高度刚好包裹内容；当有6行及以上时，tbody会限制在5行的高度，自动出现垂直滚动条，完全符合你的需求！

内容的提问来源于stack exchange，提问作者Prajna Hegde