Set the width of a th element depending on other td width

Question

I have an html table designed using twitter bootstrap and I fixed the table's header row to fixed using Fixed TableRC plugin as given in this fiddle. The header's th width is set as

 $(document).ready(function() {
   var modal = [];
   var ColNums = document.getElementById('fixed_hdr2').rows[0].cells.length;

   for (var i = 1; i < ColNums+1; i++) {
       var row = $("#fixed_hdr2 th:nth-child("+i+")").width();
    // var row = 30;
       modal.push({ width: row, align: 'center' });
    } 

    $('#fixed_hdr2').fxdHdrCol({
        fixedCols:  0,
        width:     "100%",
        height:    "364px",
        colModal:  modal,
    //  sort: true
    });
   });

And it work fine for blank table. When I added some values inside the td of the table, the alignment of the column slightly altered as given in this fiddle and in this case also. How can I fix this issue?

Answer 1

After several tries, the issue is solved by setting the width of all td's to the width of respective th of header row by using jquery .width() property as,

var ColNums = document.getElementById('fixed_hdr2').rows[0].cells.length;

   for (var i = 1; i < ColNums+1; i++) {
       var row = $(".ft_r th:nth-child("+i+")").width();
       $("#fixed_hdr2 td:nth-child("+i+")").width(row);
    } 

and setting word-break:break-all as

#fixed_hdr2 tr td {
 word-break:break-all;      
        }

as @Bhushan Kawadkar suggested.

Working fiddle