当行减少时如何调整表的大小？

Question

我在搜索栏下有一张桌子。当我在其中写东西时，它会用我的技能列表过滤该单词，并且该表会出现在栏的底部。

一切正常，但此div的大小不是很好，因为它的高度为300px，所以如果我有10个技能可以，但是如果该技能为2，则每td的高度为150px。 / p>

所以我想用最大300px的高度修复此问题，当行减少时，我希望表格变小。

HTML

<div class="container">
    <ng-container
            *ngIf="searchString.searchString && (searchSkills.getAllSkill() | filterAll : searchString.searchString) as filteredSkills">
        <ng-container *ngIf="filteredSkills.length > 0">
            <div class="suggerite">
                <cdk-virtual-scroll-viewport [itemSize]="10" class="sugtab style-bar modal-bar">
                    <table class="sugtab">
                        <tbody>
                        <tr *cdkVirtualFor="let skill of filteredSkills" class="sugtag">
                            <td (click)="addToSearch(skill)" class="skill">
                                {{skill.name}}
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </cdk-virtual-scroll-viewport>
            </div>
        </ng-container>
    </ng-container>
</div>

CSS

.suggerite{
    position: relative;
    border: 1px solid #064a94;
    border-radius: 5px;
    background-color: rgba(255,255,255,0.9);
    color: #064a94;
    z-index: 100;
    cursor: pointer;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.sugtab{
    height: 200px;
    width: 100%;
    font-family: sans-serif;
}

tr.sugtab {
    height: 50px;
}

td.skill{
    padding: 3px;
}

我尝试使用最大高度和其他东西，但是可能在错误的地方。