JSFiddle - React, Tailwind, and code Playground

HTML

<div id="dw_1" style="overflow:auto; height:100px;">
        <table cellspacing="0" cellpadding="0" width="100%">
            <thead>
                <tr style="position:relative;
                top:expression(this.offsetParent.scrollTop);backgr ound-color:#dddddd;">
                <th nowrap>Header A</th>
                <th nowrap>Header B</th>
                <th nowrap>Header C</th>
                </tr>
            </thead>
            <tbody>
                <tr><td>aaaaaaaaaaaaaaaaaaa</td><td>b</td><td>ccccccccccccccccccc</td></tr>
                <tr><td>a</td><td>bbbbbbb</td><td>c</td></tr>
                <tr><td>a</td><td>b</td><td>c</td></tr>
                <tr><td>a</td><td>b</td><td>c</td></tr>
                <tr><td>a</td><td>b</td><td>c</td></tr>
                <tr><td>a</td><td>b</td><td>c</td></tr>
                <tr><td>a</td><td>b</td><td>c</td></tr>
                <tr><td>a</td><td>b</td><td>c</td></tr>
                <tr><td>a</td><td>b</td><td>c</td></tr>
                <tr><td>a</td><td>b</td><td>c</td></tr>
                <tr><td>a</td><td>b</td><td>c</td></tr>
                <tr><td>a</td><td>b</td><td>c</td></tr>
            </tbody>
        </table>
    </div>

CSS

#dw_1 {
            overflow: auto;
            height: 420px;
            width: 100%;
        }
        table {
            overflow: hidden;
        }
        td,th {
            border : 1px solid black;
        }
        .relativePosition {
            position: relative;
        }
        th{
            background-color : green;
        }

JavaScript

var scrollComplete = 0;
$('#dw_1').on('scroll', function () {
  var $dw_1 = $(this),
      tableHeader = $dw_1.find('thead th'),
      top=$dw_1.scrollTop();

  tableHeader.addClass('relativePosition');
  tableHeader.css({'top':top});

});