jQuery Tablesorter Scroller组件高度无法设置为300px问题求助

问题分析 #

设置scroller_height: 300后表格仍铺满浏览器窗口，核心原因是多主题CSS冲突，主题样式覆盖了Scroller组件的高度设置。

解决方案 #

1. 移除冲突的主题CSS #

你同时引入了dropbox和bootstrap_4两个主题，但配置中指定了theme: 'dropbox'，多余主题会导致样式冲突。修改后的资源链接如下：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.31.3/css/theme.dropbox.min.css">

<script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/ui/1.13.1/jquery-ui.min.js" integrity="sha256-eTyxS0rkjpLEo16uXTS0uVCS4815lc40K2iVpWDvdSY=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.31.3/js/jquery.tablesorter.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.31.3/js/jquery.tablesorter.widgets.min.js"></script>

2. 添加自定义CSS强制设置高度 #

Scroller组件会将表格包裹在.tablesorter-scroller类的容器中，添加以下CSS强制覆盖主题样式：

<style>
.tablesorter-scroller {
    height: 300px !important;
    max-height: 300px !important;
}
</style>

3. 确认配置与表格内容 #

• 确保JS配置中的scroller_height: 300拼写正确，你的现有配置无问题。
• 表格需要有足够多的行（高度超过300px），否则Scroller不会触发滚动效果。

4. 检查父元素样式 #

如果表格的父容器设置了height: 100%或继承高度的样式，需调整父元素CSS，避免影响Scroller容器的高度计算。

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