html - 用于表格滚动的 CSS 无法正常工作

Question

我有一个 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>

div 的 CSS

 #scrollablebody{height:500px;overflow-y:auto;width:100%;}

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

正如您在上图中看到的，带有 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;
}

Answer 1

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