Css Angular 2/Typescript-带固定标题的滚动表体

我试图使这个表满足以下要求：表体应该有一个垂直滚动条，顶部有固定的标题，如果需要的话，整个表应该有一个垂直滚动条（我已经通过将它放在带有overflow-x:auto的div中实现了这一点）。我真正的问题似乎是垂直滚动条，确保标题和正文列对齐，而不需要指定宽度

我非常希望不使用固定列宽，因为我们最终将在将来使一些列可见/隐藏，并且只使用Angular2/Typescript/CSS方法，而不使用任何第三方文件或JQuery

 <table class="ui celled striped table">
<thead>
    <tr>
        <th (click)="sort('awardsCount')" class="pointer" nowrap>
            Awards
            <i class="sort icon" [ngClass]="getSortIcon('awardsCount')"></i>
        </th>
        <th (click)="sort('booksCount')" class="pointer" nowrap>
            Books
            <i class="sort icon" [ngClass]="getSortIcon('booksCount')"></i>
        </th>
        <th (click)="sort('grantsCount')" class="pointer" nowrap>
            Grants
            <i class="sort icon" [ngClass]="getSortIcon('grantsCount')"></i>
        </th>
        <th (click)="sort('articlesCount')" class="pointer" nowrap>
            Articles
            <i class="sort icon" [ngClass]="getSortIcon('articlesCount')"></i>
        </th>
        <th (click)="sort('conferenceProceedingsCount')" class="pointer" nowrap>
            Conf Procs
            <i class="sort icon" [ngClass]="getSortIcon('conferenceProceedingsCount')"></i>
        </th>
        <th (click)="sort('citationsCount')" class="pointer" nowrap>
            Citations
            <i class="sort icon" [ngClass]="getSortIcon('citationsCount')"></i>
        </th>
        <th (click)="sort('patentsCount')" class="pointer" nowrap>
            Patents
            <i class="sort icon" [ngClass]="getSortIcon('patentsCount')"></i>
        </th>
        <th (click)="sort('degreeYear')" class="pointer" nowrap>
            Degree Year
            <i class="sort icon" [ngClass]="getSortIcon('degreeYear')"></i>
        </th>
        <th (click)="sort('degreeInstitutionName')" class="pointer" nowrap>
            Degree Institution
            <i class="sort icon" [ngClass]="getSortIcon('degreeInstitutionName')"></i>
        </th>
    </tr>
</thead>
<tbody>
    <tr *ngFor='let result of searchResults'>
        <td>{{result.collaborationsCount | number}}</td>
        <td>{{result.awardsCount | number}}</td>
        <td>{{result.booksCount | number}}</td>
        <td>{{result.grantsCount | number}}</td>
        <td>{{result.articlesCount | number}}</td>
        <td>{{result.conferenceProceedingsCount | number}}</td>
        <td>{{result.citationsCount | number}}</td>
        <td>{{result.patentsCount | number}}</td>
        <td>{{result.degreeYear}}</td>
        <td>{{result.degreeInstitutionName}}</td>
    </tr>
</tbody>

奖品
书
赠款
文章
确认程序
引证
专利权
学位年
学位机构
{{result.collaborationscont | number}
{{result.awardscont | number}
{{result.booksCount | number}
{{result.grantcount | number}
{{result.articlesunt | number}
{{result.conferenceprocedingscount | number}
{{result.引文目录|编号}
{{result.patentCount | number}
{{result.degreeYear}}
{{result.degreeInstitutionName}

---

请参考中提供的解决方案。希望这有帮助。