Column header width cannot resize when multiple grid table

I use John's solution that resize all the grid tables when resizing one of the table. However, the column header column doesn't change. Only the columns in the content does the change. How can I change the column header width.

I use these code:

function LoadColumnBase(widths){
if( widths.length > 0 ){
if(columnWidths.length > 0){
widths = columnWidths;
}
var i, j, count = obj.getColumnProperty("count");
var ss = document.styleSheets[document.styleSheets.length-1];

for (i=0; i<count;i++){
var width = widths[i]; //this.getTemplate("top/item", i).element().firstChild.scrollWidth;
var selector = "#" + obj.getId() + " .active-column-" + i;
var rule = null;

if(width > 600){
width = 600;
}

for(j=0; j<ss.rules.length;j++){
if(ss.rules[j].selectorText == selector){
rule = ss.rules[j];
break;
}
}

if (rule) {
rule.style.width = width;
}
else {
ss.addRule(selector, "width:" + width + "px");
}

obj.getTemplate("layout").action("adjustSize");
}// for
}// if

if(typeof tableSort != "undefined"){
obj.sort(tableSort[0], tableSort[1]);
}
}

Why the column header row doesn't change?