JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrapper">
<table>
    <thead>
    <tr>
        <td></td>
        <td>A header</td>
        <td>A header</td>
    </tr>
    </thead>
    <tr>
        <td>A field row 1</td>
        <td>A field row 1</td>
        <td>A field row 1</td>
    </tr>
    <tr>
        <td>A field row 2</td>
        <td>A field row 2</td>
        <td>A field row 2</td>
    </tr>
    <tr>
        <td>A field row 3</td>
        <td>A field row 3</td>
        <td>A field row 3</td>
    </tr>
    <tr>
        <td>A field row 4</td>
        <td>A field row 4</td>
        <td>A field row 4</td>
    </tr>
    <tr>
        <td>A field</td>
        <td>A field</td>
        <td>A field</td>
    </tr>
    <tr>
        <td>A field</td>
        <td>A field</td>
        <td>A field</td>
    </tr>
    <tr>
        <td>A field</td>
        <td>A field</td>
        <td>A field</td>
    </tr>
    <tr>
        <td>A field</td>
        <td>A field</td>
        <td>A field</td>
    </tr>
    <tr>
        <td>A field</td>
        <td>A field</td>
        <td>A field</td>
    </tr>
    <tr>
        <td>A field</td>
        <td>A field</td>
        <td>A field</td>
    </tr><tr>
        <td>A field</td>
        <td>A field</td>
        <td>A field</td>
    </tr>
    <tr>
        <td>A field</td>
        <td>A field</td>
        <td>A field</td>
    </tr>
    <tr>
        <td>A field</td>
        <td>A field</td>
        <td>A field</td>
    </tr>
    <tr>
        <td>A field</td>
        <td>A field</td>
        <td>A field</td>
    </tr>
    <tr>
        <td>A field</td>
        <td>A field</td>
        <td>A field</td>
    </tr>
    <tr>
        <td>A field</td>
        <td>A field</td>
        <td>A field</td>
    </tr>
    <tr>
        <td>A field</td>
        <td>A field</td>
        <td>A field</td>
    </tr>
    <tr>
        <td>A field</td>
        <td>A field</td>
        <td>A field</td>
    </tr>
    <tr>
        <td>A field</td>
        <td>A field</td>
        <td>A field</td>
    </tr>
   ...

CSS

/* this is what will do the trick */
tbody {
    display: block;
    padding-top: 21px;
}

thead {
    z-index: 1; /* put on top of other rows */
}

thead tr td {
    background: #ddd;
}

/* only using !important to override your styles below */
td {
    margin-left: 0 !important;
    width: 100px !important;
}






table {
font-family:Arial, Helvetica, sans-serif;
color:#666;
font-size:15px;
background:#eaebec;
border:#ccc 1px solid;
border-radius:3px;
border-collapse:collapse; border-spacing: 0; 
box-shadow: 0 1px 2px #d1d1d1;
}
table th {
padding:2px 2px 2px 2px;
border-top:0;
border-bottom:1px solid #e0e0e0;
border-left: 1px solid #e0e0e0;
background: #ededed;
}
table th:first-child {
text-align: left;
}
table tr:first-child th:first-child {
border-top-left-radius:3px;
border-left: 0;
}
table tr:first-child th:last-child {
border-top-right-radius:3px;
}
table tr {
text-align: center;
}
table td:first-child {
text-align: left;
border-left: 0;
}
table td {
padding:2px 2px 2px 2px;
border-top:0;
border-bottom:1px solid #e0e0e0;
border-left: 1px solid #e0e0e0;
white-space: nowrap;
}
table tr:last-child td {
border-bottom:0;
}
table tr:last-child td:first-child {
border-bottom-left-radius:3px;
}
table tr:last-child td:last-child {
border-bottom-right-radius:3px;
}
table tr:hover td {
background: #F7FE2E;
}
table th, table td {
width: 65px;
}
table tr, table td {
width: 65px;
min-width: 65px;
}
#wrapper {
width: auto;
height: 450px;
overflow-x: scroll;
overflow-y: scroll;
}
thead
{
position: fixed;
}
tbody
{
position: relative;
}