javascript - 如何在html中修复表格滚动中的标题

Question

我有一个 html，其中的内容是动态添加的。我想滚动表格中的内容并在滚动时固定标题但是当我使用滚动时标题也会滚动任何人都可以告诉我我必须做什么才能在滚动内容时固定标题.

<div class="tableContainer" ng-style="{ 'overflow' : 'auto', 'max-height' : vm.height }">
        <table class="ledgerTable" cellspacing="10">
          <thead fix-head>
              <tr class="ledgerTblHeader">
              <th>{{"serialnumber_message" | translate}}</th>
              <th>{{"producttype_message" | translate}}</th>
              <!-- <th>{{"PC" | translate}}</th> -->
              <th>{{"count_message" | translate}}</th>
            </tr>
          </thead>
            <tbody>
              <tr ng-repeat="producttype in vm.vehicle.productdetails" ng-click="vm.showPopup(producttype)">
                <td>#{{$index + 1}}</td>
                <td>{{ producttype.type }}</td>
                <!-- <td>{{ ledger.other_amount }}</td> -->
                <td align="right">{{ producttype.count }}</td>
              </tr>
            </tbody>
        </table>
     </div>

Answer 1

table {
    width: 500px;
}
th{
  background-color:green;
}
.scroll {
    max-height: 170px;
    overflow: auto;
}

<table border="1">
    <tr>
    <th>head1</th>
    <th>head2</th>
    <th>head3</th>
    <th>head4</th>
    </tr>
</table>
<div class="scroll">
    <table>
        <tr>
        <td>Test Test</td>
        <td>Test Test</td>
        <td>Test Test</td>
        <td>Test Test</td>
        </tr>
         <tr>
        <td>Test Test</td>
        <td>Test Test</td>
        <td>Test Test</td>
        <td>Test Test</td>
        </tr>
         <tr>
        <td>Test Test</td>
        <td>Test Test</td>
        <td>Test Test</td>
        <td>Test Test</td>
        </tr>
         <tr>
        <td>Test Test</td>
        <td>Test Test</td>
        <td>Test Test</td>
        <td>Test Test</td>
        </tr>
         <tr>
        <td>Test Test</td>
        <td>Test Test</td>
        <td>Test Test</td>
        <td>Test Test</td>
        </tr>
         <tr>
        <td>Test Test</td>
        <td>Test Test</td>
        <td>Test Test</td>
        <td>Test Test</td>
        </tr>
         <tr>
        <td>Test Test</td>
        <td>Test Test</td>
        <td>Test Test</td>
        <td>Test Test</td>
        </tr>
         <tr>
        <td>Test Test</td>
        <td>Test Test</td>
        <td>Test Test</td>
        <td>Test Test</td>
        </tr>
         <tr>
        <td>Test Test</td>
        <td>Test Test</td>
        <td>Test Test</td>
        <td>Test Test</td>
        </tr>
         <tr>
        <td>Test Test</td>
        <td>Test Test</td>
        <td>Test Test</td>
        <td>Test Test</td>
        </tr>
         <tr>
        <td>Test Test</td>
        <td>Test Test</td>
        <td>Test Test</td>
        <td>Test Test</td>
        </tr>
        <tr>
        <td>Test Test</td>
        <td>Test Test</td>
        <td>Test Test</td>
        <td>Test Test</td>
        </tr>
         <tr>
        <td>Test Test</td>
        <td>Test Test</td>
        <td>Test Test</td>
        <td>Test Test</td>
        </tr>
         <tr>
        <td>Test Test</td>
        <td>Test Test</td>
        <td>Test Test</td>
        <td>Test Test</td>
        </tr>
         <tr>
        <td>Test Test</td>
        <td>Test Test</td>
        <td>Test Test</td>
        <td>Test Test</td>
        </tr>
         <tr>
        <td>Test Test</td>
        <td>Test Test</td>
        <td>Test Test</td>
        <td>Test Test</td>
        </tr>
         <tr>
        <td>Test Test</td>
        <td>Test Test</td>
        <td>Test Test</td>
        <td>Test Test</td>
        </tr>
         <tr>
        <td>Test Test</td>
        <td>Test Test</td>
        <td>Test Test</td>
        <td>Test Test</td>
        </tr>
         <tr>
        <td>Test Test</td>
        <td>Test Test</td>
        <td>Test Test</td>
        <td>Test Test</td>
        </tr>
         <tr>
        <td>Test Test</td>
        <td>Test Test</td>
        <td>Test Test</td>
        <td>Test Test</td>
        </tr>
         <tr>
        <td>Test Test</td>
        <td>Test Test</td>
        <td>Test Test</td>
        <td>Test Test</td>
        </tr>
         <tr>
        <td>Test Test</td>
        <td>Test Test</td>
        <td>Test Test</td>
        <td>Test Test</td>
        </tr>
    </table>
</div>

可能对你有帮助。