javascript - 表格滚动 css 从 Jquery 更改

Question

实际上我有一个表格，我需要在其中设置一个 max-height 并使其可滚动。

我的表格设计

<table class="table table-striped table-notactiveusers table-custom-scroll" style="border: 1px solid #e7eaec;" id="tblNonUandMeUsersList" runat="server">
   <thead>
      <tr>
         <th style="width: 5%">#</th>
         <th style="width: 33%">First Name</th>
         <th style="width: 30%">Country Code</th>
         <th style="width: 32%">Mobile Number</th>
     </tr>
   </thead>
</table> 

我的表 css:

.table-custom-scroll > thead, .table-custom-scroll > tbody {
    display: block;
}

.table-custom-scroll > tbody {
    max-height: 450px;
    overflow-y: auto;
    overflow-x: hidden;
}

但是，如果表格的行数少于最大高度，则右侧会为正文留出空间，如图所示

所以，我想到将 css 更改为 display : compact，如果表格行数少于 12。

我的JS改css

<script>
   $(document).ready(function () {
     var notactiverowCount = $('.table-notactiveusers tr').length;

      if (notactiverowCount < 12) {
         $('.table-notactiveusers > thead').css('display', 'compact');
         $('.table-notactiveusers > body').css('display', 'compact');
     }
    if (notactiverowCount < 12) {
        $('.table-notactiveusers').children('head').css('display', 'compact');
        $('.table-notactiveusers').children('body').css('display', 'compact');
    }
});
</script>

但是 css 并没有改变。谁能告诉我我做错了什么？

Answer 1

如果只使用 css 会怎样

.table-custom-scroll{
    display: block;
}

查看演示 HERE