January 17, 2013

Forcing <table> Columns to a Fixed Width; Prevent Automatic Expand

Question by Chad Decker

I generally set fixed column widths via CSS with flawless results:

#tableID thead tr th:nth-child(1){width: 75px;} 
#tableID thead tr th:nth-child(2){width: 75px;}
/* etc… */

But now I’m in a situation where I won’t know the desired column widths until runtime. Here’s an excerpt from the code I’m using to dynamically set the column widths:

var tr=$("<tr>");
var colArr=Home.ColDefs[this.statBatchType].colArr;
for(var i=0;i<colArr.length;i++){
    var col=colArr[i];
    tr.append(
        $("<th>")
            .html(col.title)
            .css("width",col.width)
    );
}
this.jqTHead.append(tr);

Sorry this code is a bit out of context but the bottom line is that I’m adding columns, represented by <th> elements, to a table header and setting each one’s width.

What ACTUALLY happens, however, is that Firefox is treating the column width as a minimum and then automatically expanding the column width as the user expands his browser window. Consider a case where my JavaScript code sets the width of each column to 75px. Firefox will ensure each column is at least 75px wide, but if the user maximizes (or enlarges) his browser, provided there is sufficient room, each column will be automatically widened.

This is odd to me since the JavaScript code would seem to be the functional equivalent of what I was doing in CSS. Yet the CSS approach doesn’t cause this odd behavior.

Any thoughts?

Answer by Starx

You can assign a class selector with the required css and then assign it later when you need it on runtime.

.fixed {
   width: 50px;
}

And assign them when you want in run time.

$("th").addClass('fixed');
...

Please fill the form - I will response as fast as I can!