JSFiddle - React, Tailwind, and code Playground

HTML

<div id="fixed-header-table">
    <div class="fixed-header-bg"></div>
    <div class="scrolling-table-body">
        <table>
            <thead>
                <tr>
                    <th><div>Column 1</div></th>
                    <th><div>Column 2</div></th>
                    <th><div>Column 3</div></th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td><input type="checkbox"/></td>
                    <td>Sample text</td>
                    <td>Sample text</td>
                </tr>
                <tr>
                    <td><input type="checkbox"/></td>
                    <td>Sample text</td>
                    <td>Sample text</td>
                </tr>
                <tr>
                    <td><input type="checkbox"/></td>
                    <td>Sample text</td>
                    <td>Sample text</td>
                </tr>
                <tr>
                    <td><input type="checkbox"/></td>
                    <td>Sample text</td>
                    <td>Sample text</td>
                </tr>
                <tr>
                    <td><input type="checkbox"/></td>
                    <td>Sample text</td>
                    <td>Sample text</td>
                </tr>
                <tr>
                    <td><input type="checkbox"/></td>
                    <td>Sample text</td>
                    <td>Sample text</td>
                </tr>
                <tr>
                    <td><input type="checkbox"/></td>
                    <td>Sample text</td>
                    <td>Sample text</td>
                </tr>
                <tr>
                    <td><input type="checkbox"/></td>
                    <td>Sample text</td>
                    <td>Sample text</td>
                </tr>
                <tr>
                    <td><input type="checkbox"/></td>
                    <td>Sample text</td>
                    <td>Sample text</td>
                </tr>
          ...

CSS

#fixed-header-table {
    height: 200px;
    top: 100px;
    padding-top: 28px;
    position: absolute;
    width: 50%;
}
.fixed-header-bg {
    height: 28px;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
}
.scrolling-table-body {
    border: 1px solid;
    height: 100%;
    overflow-y: auto;
}

table {
    border-collapse: collapse;
    width: 100%;
}
th div,
td {
   padding: 5px; 
}
th div {
    position: absolute;
    top: 0;
}

JavaScript

/*
 * Dynamic-width, fixed-header, scrollable table from http://salzerdesign.com/blog/?p=191
 *
 * A redraw issue occurs in Google Chrome:
 *     1. progressively scroll down the list, checking each checkbox - the column headers "float" up and away
 *     2. double-click where a column header SHOULD be - the header redraws where it should be
 */