Bootstrap 4 表头固定,tbody滚动条

表格

<div class="row" style="background-color: #fff;overflow: auto;max-height: 500px;">
     <table class="table table-striped table-bordered scrolltable text-nowrap">
                  <thead>
                        <tr>
                          <th scope="col">序号</th>
                            <th scope="col">备注</th>
                           <th scope="col">备注</th>
                           <th scope="col">备注</th>
                            <th scope="col">备注</th>
                            <th scope="col">备注</th>
                            <th scope="col">备注</th>
                            <th scope="col">备注</th>
                            <th scope="col">备注</th>
                            <th scope="col">备注</th>
                          </tr>
                     </thead>
                    <tbody >
                        <tr>
                           <th scope="row">1</th>
                            <td>Mark</td>
                            <td>Otto</td>
                            <td>Mark</td>
                             <td>Otto</td>
                              <td>@mdo</td>
                              <td>Mark</td>
                               <td>Otto</td>
                                <td>Mark</td>
                                <td>Otto</td>
                             </tr>
                       </tbody>
                   </table>

        </div>

CSS 

thead tr:first-child {
        background-color: #CCC; 
        position:sticky;
        top:-10px;

    }