Set Html Table Column's Width Based On Header Width - Stack Overflow

I am trying to get my html table working with vertical scrollbar for tbody based on SO Post. I got the scrollbar working but struggling to dynamically set the width of the columns. The suggested SO answer setting the width of the header columns based on the width of tbody columns. I want to do exactly opposite. I am trying to set width of tbody columns ( first row only) based on header column width.

JSfiddle DEMO

html

<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> </tr> </thead> <tbody> <tr> <td>A12345</td> <td>1254</td> <td>200</td> <td>43243</td> <td>432</td> <td>4323</td> <td>4324</td> <td>434</td> <td>4343244</td> <td>4343244</td> </tr> <tr> <td>A12345</td> <td>1254</td> <td>200</td> <td>43243</td> <td>432</td> <td>4323</td> <td>4324</td> <td>434</td> <td>4343244</td> <td>4343244</td> </tr> <tr> <td>A12345</td> <td>1254</td> <td>200</td> <td>43243</td> <td>432</td> <td>4323</td> <td>4324</td> <td>434</td> <td>4343244</td> <td>4343244</td> </tr> <tr> <td>A12345</td> <td>1254</td> <td>200</td> <td>43243</td> <td>432</td> <td>4323</td> <td>4324</td> <td>434</td> <td>4343244</td> <td>4343244</td> </tr> <tr> <td>A12345</td> <td>1254</td> <td>200</td> <td>43243</td> <td>432</td> <td>4323</td> <td>4324</td> <td>434</td> <td>4343244</td> <td>4343244</td> </tr> </tbody> </table>

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]); }); })

css

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

ISSUE Issue here is jquery's width() function does not return the same value as what is set on th. If i inspect html in the browser the width property of td does not match with corresponding th I have tried .css("width") as well with noluck. I