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?

score 1 · Answer 1 · answered Jul 07 '14 at 06:32

In this case, you are adding text and column width taking space equal to width of word with maximum length i.e. without breaking a word. If you add word-break:break-all to you modal array then this will resolve your issue :

modal.push({ width: row, align: 'center' ,word-break:'break-all'});

Demo JSFiddle

mpsbhat · Accepted Answer · 2014-07-09T07:28:13.133

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

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

2 Answers2