Html 表格滚动的CSS无法正常工作

我有一个HTML页面，其中有一个表，用于填充数据库表中的数据，我试图通过将表放在一个div中来限制表的大小，如下所示

<div id="scrollablebody">

<table class="clientTable">

    <thead>

        <tr>
            <th>Grade</th>
            <th>Term</th>              
            <th colspan="3">Actions</th>    
        </tr>    
    </thead>

    <!--ko foreach: products-->

    <tr>
            <td  class="clientproductHeader" data-bind="text: $data">

            </td>
         <td  class="clientproductHeader" colspan="13"></td>
        </tr>


    <tbody  data-bind="foreach: ko.observableArray($root.datainput()).extendsdistinct('Product').index.Product()[$data]">             


        <tr data-bind="template: { name: $root.displayMode, data: $data }"></tr>

    </tbody>
    <!--/ko-->

</table>

    </div>

但由于某些原因，正文中的文本占用了所有空间，如下图所示

如上图所示，带有c5+的行异常占用了大量空间

表格的CSS

.clientTable {
    max-width: 100%;
    background-color: grey;
   height:75%;
    border-collapse: collapse;
    border-spacing: 0;
    margin-bottom: 20px;
   width: 98%;
   margin-left:0;
   margin-right:100px;
    float: left;
   overflow:scroll;
}
table.clientTable thead tr .header {
    background-image: url(images/bg.png);
    background-repeat: no-repeat;
    background-position: center right;
    cursor: pointer;
}


table.clientTable td {
    padding: 1px;
    line-height: 10px;
    text-align: center;
    /*background-color:#3C78B5;*/
    vertical-align: auto;
    border: 1px solid #0088cc;
    width: 120px; 
}
.clientTable th {
    padding: initial;
    line-height: normal;
    text-align: center;
    width: initial;
    height: 20px;
    border: 1px outset gray;
    background-color: black;
    color: white;
    cursor: pointer;
}

---

将“高度”更改为“最大高度”。如果不指定溢出并将其设为自动溢出，它会变大。

它会占用500像素吗？是的，几乎是这样，但当我继续向表中添加更多记录时，橙色空间会根据记录的数量而减小；需要看到更多的CSS。例如，对于DIV，这就是我用于DIV的所有css尝试在

.clientTable

上去掉

浮点

和

溢出

…不，我希望表格高度固定，这就是我添加滚动到表格的原因。同样的结果，即使我改变了溢出属性，我还是有点困惑。为什么要使用overflow-y:show而不是overflow-y:scroll？我之前确实使用过overflow-y:scroll，但它不起作用。所以，我尝试了其他属性

.clientTable {
    max-width: 100%;
    background-color: grey;
   height:75%;
    border-collapse: collapse;
    border-spacing: 0;
    margin-bottom: 20px;
   width: 98%;
   margin-left:0;
   margin-right:100px;
    float: left;
   overflow:scroll;
}
table.clientTable thead tr .header {
    background-image: url(images/bg.png);
    background-repeat: no-repeat;
    background-position: center right;
    cursor: pointer;
}


table.clientTable td {
    padding: 1px;
    line-height: 10px;
    text-align: center;
    /*background-color:#3C78B5;*/
    vertical-align: auto;
    border: 1px solid #0088cc;
    width: 120px; 
}
.clientTable th {
    padding: initial;
    line-height: normal;
    text-align: center;
    width: initial;
    height: 20px;
    border: 1px outset gray;
    background-color: black;
    color: white;
    cursor: pointer;
}