JSFiddle - React, Tailwind, and code Playground

HTML

<div id="tableContainer">
<table class="all-table">
    <thead>
    <tr>
        <td class="td-fixed">sdsdsd</td>
        <td class="td-fixed td-fixed-margin">sdsds</td>
        <td class="gray-background">sdsdsd</td>
        <td class="gray-background">sdsdd</td>
        <td class="gray-background">sdsds</td>
        <td class="gray-background">sddsds</td>
    </tr>
    </thead>
    <tbody>
        <tr>
        <td class="td-fixed white-background">a</td>
        <td class="td-fixed td-fixed-margin" >a</td>
        <td>aaaaaaaaaaaa</td>
        <td>aaaaaaaaaaaa</td>
        <td>aaaaaaaaaaaa</td>
        <td>aaaaaaaaaaaa</td>
        </tr>
            <tr>
        <td class="td-fixed white-background">a</td>
        <td class="td-fixed td-fixed-margin">a</td>
        <td >aaaaaaaaaaaa</td>
        <td >aaaaaaaaaaaa</td>
        <td>aaaaaaaaaaaa</td>
        <td>aaaaaaaaaaaa</td>
    </tr>
                    <tr>
        <td class="td-fixed white-background">a</td>
        <td class="td-fixed td-fixed-margin">a</td>
        <td >aaaaaaaaaaaa</td>
        <td >aaaaaaaaaaaa</td>
        <td>aaaaaaaaaaaa</td>
        <td>aaaaaaaaaaaa</td>
    </tr>
                    <tr>
        <td class="td-fixed white-background">a</td>
        <td class="td-fixed td-fixed-margin ">a</td>
        <td >aaaaaaaaaaaa</td>
        <td >aaaaaaaaaaaa</td>
        <td>aaaaaaaaaaaa</td>
        <td>aaaaaaaaaaaa</td>
    </tr>
                    <tr>
        <td class="td-fixed white-background">a</td>
        <td class="td-fixed td-fixed-margin white-background">a</td>
        <td >aaaaaaaaaaaa</td>
        <td >aaaaaaaaaaaa</td>
        <td>aaaaaaaaaaaa</td>
        <td>aaaaaaaaaaaa</td>
    </tr>
    </tbody>
</table>
</div>

CSS

#tableContainer {
    width: 300px;
    overflow:auto;
    overflow-y: scroll;
} 
.td-fixed {
        position: fixed;
    left:0px;
    width:30px;
        z-index:1;
        height:25px;
}
.td-fixed-margin{
  margin-left:31px;
}
.td-fixed-padding{
  padding-left:31px;
}
.all-table {
    width: 300px;
    margin-top: 0;
    table-layout: fixed;
    border-spacing: 0;
}
td {
  border-right: solid 1px #cccccc;
  border-bottom: solid 1px #cccccc;
  height: 25px;
  padding: 0;
  overflow: hidden;
        -ms-text-overflow: ellipsis;
        -o-text-overflow: ellipsis;
        text-overflow: ellipsis;
}