JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2016.3.914/styles/kendo.common-bootstrap.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2016.3.914/styles/kendo.bootstrap.min.css">
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.1.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/bootstrap.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2016.3.914/js/kendo.all.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2016.3.914/js/kendo.aspnetmvc.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/css/bootstrap-multiselect.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/js/bootstrap-multiselect.js"></script>
<table class="table mytable">
    <thead>
        <tr>
            <th style="border-top:2px solid #ddd"></th>
            <th colspan="4" style="text-align:center;border-left:1px solid #ddd;border-right:1px solid #ddd;border-top:2px solid #ddd">Group 1</th>
            <th colspan="4" style="text-align:center;border-left:1px solid #ddd;border-right:1px solid #ddd;border-top:2px solid #ddd">Group 2</th>
            <th style="border-top:2px solid #ddd">Group 3</th>
        </tr>
        <tr>
            <th style="width:200px">Col 1</th>
            <th style="width:150px;border-left:1px solid #ddd">Col 2</th>
            <th style="width:150px">Col 3</th>
            <th style="width:150px" class="td-md">Col 4</th>
            <th style="width:150px">Col 5</th>            
            <th style="width:150px;border-left:1px solid #ddd">Col 6</th>
            <th style="width:150px">Col 7</th>
            <th style="width:150px">Col 8</th>
            <th style="width:150px">Col 9</th>
            <th style="width:150px;border-left:1px solid #ddd">Col 10</th>
       ...

CSS

thead, tbody {
        display: block;
    }

    tbody {
        height: 200px; /* Just for the demo          */
        overflow-y: auto; /* Trigger vertical scroll    */
        overflow-x: hidden; /* Hide the horizontal scroll */
    }

JavaScript

$(function () {
 
       // Change the selector if needed
    var $table = $('.mytable'),
        $bodyCells = $table.find('thead tr:nth-child(2) th'),
        colWidth;
    var alertWidth = '';
        

    // Get the header columns width array
    colWidth = $bodyCells.map(function() {
    		var $this = $(this);
        alertWidth += $this.width() + ","; 
        return $this.width();
    }).get();

		alert(alertWidth);

    // Set the width of first row's column
    $table.find('tbody tr:first td').each(function(i, v) {
        //alert(colWidth[i]);
        $(v).width(colWidth[i]);
    });

})