JSFiddle - React, Tailwind, and code Playground

HTML

<table id="demoTable" cellpadding="0" cellspacing="0" border="0">
    <thead>
        <tr><th>One</th><th>Two</th><th class="expand">Three</th><th>Four</th></tr>
    </thead>
    <tbody>
        <tr><td>1</td><td>2</td><td class="expand">3</td><td>4</td></tr>
        <tr class="highlight" onclick="if(this.className==''){this.className='highlight';}else{this.className='';}"><td>1</td><td>2</td><td class="expand">3</td><td>4</td></tr>
        <tr><td>1</td><td>2</td><td class="expand">3</td><td>4</td></tr>
        <tr><td>1</td><td>2</td><td class="expand">3</td><td>4</td></tr>
        <tr><td>1</td><td>2</td><td class="expand">3</td><td>4</td></tr>
        <tr><td>1</td><td>2</td><td class="expand">3</td><td>4</td></tr>
        <tr><td>1</td><td>2</td><td class="expand">3</td><td>4</td></tr>
        <tr><td>1</td><td>2</td><td class="expand">3</td><td>4</td></tr>
        <tr><td>1</td><td>2</td><td class="expand">3</td><td>4</td></tr>
        <tr><td>1</td><td>2</td><td class="expand">3</td><td>4</td></tr>
        <tr><td>1</td><td>2</td><td class="expand">3</td><td>4</td></tr>
        <tr><td>1</td><td>2</td><td class="expand">3</td><td>4</td></tr>
        <tr><td>1</td><td>2</td><td class="expand">3</td><td>4</td></tr>
        <tr><td>1</td><td>2</td><td class="expand">3</td><td>4</td></tr>
        <tr><td>1</td><td>2</td><td class="expand">3</td><td>4</td></tr>
        <tr><td>1</td><td>2</td><td class="expand">3</td><td>4</td></tr>
    </tbody>
</table>

CSS

table {
    display:block;
    width:100%;
    font-weight:bold;
    text-align:center;
    border:1px solid black;
}

::-webkit-scrollbar {
    display:none;
}

table tbody {
    display:block;
    height:200px;
    overflow:hidden;
    overflow-y:auto;
}

table tbody tr td,th {
    border-right:solid 1px black;
    height:30px;
}

table tbody tr:nth-child(odd) {
    background-color:#aaa;
}

table tbody tr:nth-child(even) {
    background-color:#eee;
}

table tbody tr.highlight td {
    height:24px;
    border:#66B2FF solid 3px;
    border-left:0px;
    border-right:1px solid black;    
}

table tbody tr.highlight td:first-child {
    border-bottom-left-radius:10px;
    border-top-left-radius:10px;
}

table tbody tr.highlight td:last-child {
    border-bottom-right-radius:10px;
    border-top-right-radius:10px;
    border-right:0px;
}

table tbody tr td {
    min-width:50px    
}

table thead tr th {
    min-width:50px
}

.expand {
    width:50px;
}

table thead {
    display:block;
}

JavaScript

window.onresize = function () {
    var rule = getCSSRule('.expand');
    rule.style.width = (document.getElementById('demoTable').clientWidth - 153) + 'px';
};

function getCSSRule(ruleName, deleteFlag) {               // Return requested style obejct
   ruleName=ruleName.toLowerCase();                       // Convert test string to lower case.
   if (document.styleSheets) {                            // If browser can play with stylesheets
      for (var i=0; i<document.styleSheets.length; i++) { // For each stylesheet
         var styleSheet=document.styleSheets[i];          // Get the current Stylesheet
         var ii=0;                                        // Initialize subCounter.
         var cssRule=false;                               // Initialize cssRule. 
         do {                                             // For each rule in stylesheet
            if (styleSheet.cssRules) {                    // Browser uses cssRules?
               cssRule = styleSheet.cssRules[ii];         // Yes --Mozilla Style
            } else {                                      // Browser usses rules?
               cssRule = styleSheet.rules[ii];            // Yes IE style. 
            }                                             // End IE check.
            if (cssRule)  {                               // If we found a rule...
               if (cssRule.selectorText && cssRule.selectorText.toLowerCase()==ruleName) { //  match ruleName?
                  if (deleteFlag=='delete') {             // Yes.  Are we deleteing?
                     if (styleSheet.cssRules) {           // Yes, deleting...
                        styleSheet.deleteRule(ii);        // Delete rule, Moz Style
                     } else {                             // Still deleting.
                        styleSheet.removeRule(ii);        // Delete rule IE style.
                     }                                    // End IE check.
                     return true;                   ...