JSFiddle - React, Tailwind, and code Playground

HTML

<table>
    <tr>
        <thead>
            <div class="first_column">
                <td> task</td>
            </div>
            <div class="remaining_column">
                <td>1</td>
                <td>2</td>
                <td>3</td>
                <td>4</td>
                <td>5</td>
                <td>6</td>
                <td>7</td>
                <td>8</td>
                <td>9</td>
                <td>10</td>
                <td>11</td>
              </div> 
          <thead> 
    </tr>    
    <tr>
        <div class="first_column">
            <td> what are the possible values?</td>
        </div>
        <div class="remaining_column">
            <td>100</td>
            <td>200</td>
            <td>300</td>
            <td>400</td>
            <td>500</td>
            <td>600</td>
            <td>700</td>
            <td>800</td>
            <td>900</td>
            <td>1000</td>
            <td>1100</td>
          </div> 
    </tr>    
    <tr>
        <div class="first_column">
            <td> what are the possible numbers?</td>
        </div>
        <div class="remaining_column">
            <td>100</td>
            <td>200</td>
            <td>300</td>
            <td>400</td>
            <td>500</td>
            <td>600</td>
            <td>700</td>
            <td>800</td>
            <td>900</td>
            <td>1000</td>
            <td>1100</td>
          </div> 
    </tr>       
</table>

CSS

table {
    border-top: 1px solid #DFDFDF;
    border-collapse: collapse;
    width: 100%;
    margin-bottom: 1em;
}

tr {
    border: 0;
}

tr>td:first-child, tr>th:first-child {
    padding-left: 1.25em;
}

tr>td:last-child, tr>th:last-child {
    padding-right: 1.25em;
}

tr>td:last-child, tr>th:last-child {
    padding-right: 1.25em;
}

td, th {
    line-height: 1.5em;
    padding: 0.5em 0.6em;
    text-align: left;
    vertical-align: top;
    text-align: left;
}
.first_column{
     width:90%;      
}
.remaining_column{
     overflow:auto;      
}
th {
    background-color: #efefef;
    background-image: -moz-linear-gradient(top, #ffffff, #eaeaea);
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #ffffff), color-stop(1, #eaeaea));
        filter: progid:DXImageTransform.Microsoft.gradient(startColorStr = '#ffffff', EndColorStr = '#eaeaea');
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#ffffff', EndColorStr='#eaeaea')";
    color: #666666;
    font-weight: bold;
    line-height: 1.7em;
    padding: 0.2em 0.6em;
}

thead th {
    white-space: nowrap;
}