but firefox renders it wrong?!

Edit:

solved

th {

   -moz-box-sizing:    border-box;
   -webkit-box-sizing: border-box;
    box-sizing:        border-box;
}

This is some of my code that i have done in the past. The column headers match with the relevant data, it has a horizontal scrollbar too.

    jQuery(document).ready(function(){
          jQuery("#list").jqGrid({
            url:'/clubs/event_contacts_view_data',
            datatype: 'json',
            mtype: 'POST',
            colNames:[
            '<?= $lang->tr('Actions', $session->read('language')) ?>',
            '<?= $lang->tr('Profile', $session->read('language')) ?>',
            '<?= $lang->tr('company_name', $session->read('language')) ?>',
            '<?= $lang->tr('first_name', $session->read('language')) ?>',
            '<?= $lang->tr('last_name', $session->read('language')) ?>',
            '<?= $lang->tr('entry_date', $session->read('language')) ?>',            
            '<?= $lang->tr('email', $session->read('language')) ?>',
            '<?= $lang->tr('phone_work', $session->read('language')) ?>',
            '<?= $lang->tr('phone_home', $session->read('language')) ?>',
            '<?= $lang->tr('phone_mobile', $session->read('language')) ?>',
            '<?= $lang->tr('fax', $session->read('language')) ?>',
            '<?= $lang->tr('source_name', $session->read('language')) ?>',
            '<?= $lang->tr('allocated_to', $session->read('language')) ?>'
            ],
            colModel :[
                {name:'Actions', index:'Actions',search:false,sortable:false, width:75},            
                {name:'Profile', index:'Profile',search:false,sortable:false, width:70},
                {name:'company_name', index:'company_name', width:200},
                {name:'first_name', index:'first_name', width:200},
                {name:'u.last_name', index:'u.last_name', width:200},
                {name:'entry_date', index:'entry_date', width:150},
                {name:'email', index:'email', width:200},
                {name:'phone_work', index:'phone_work', width:200},
                {name:'phone_home', index:'phone_home', width:200},
                {name:'phone_mobile', index:'phone_mobile', width:200},
                {name:'fax', index:'fax', width:200},
                {name:'source_name', index:'source_name', width:150},    
                {name:'allocated_to', index:'allocated_to', width:150}
                ],
              stateOptions: {
                 storageKey: "LeadsCookie",
                 columns: true,
                 filters: true,
                 selection: false,
                 pager: true,
                 order: true
            },                    
            pager: jQuery('#pager'),
            rowNum:<?= isset($_SESSION["jqlimit"])?$_SESSION["jqlimit"]:10?>,
            rowList:[10,20,50,100],
            sortname: 'u.last_name',
            sortorder: 'ASC',
            multiselect: true,
            viewrecords: true,        
            caption: 'Leads',     
            height:'auto',
            shrinkToFit:false,
            loadComplete: function(){
                 setTimeout(function(){
                      $("#list").setGridWidth($("#flexicontent").width());
                      $(".ui-jqgrid-bdiv").css("overflow","auto");                    
                  },100);
             },    
            loadError : function(xhr,st,err) { jQuery("#rsperror").html("Type: "+st+"; Response: "+ xhr.status + " "+xhr.statusText); }   
           });
            $("#list").jqGrid('navGrid','#pager',{del:false,add:false,edit:false,search:false});
            $("#list").jqGrid('filterToolbar',{stringResult: true,searchOnEnter : false});     
             $(window).bind('resize', function() {
                 $("#list").setGridWidth($("#flexicontent").width());
                 $(".ui-jqgrid-bdiv").css("overflow","auto");    
             }).trigger('resize');   

Ignore stateoptions value. If u want the grid to fit in 100% with no scroll then set $(".ui-jqgrid-bdiv").css("overflow","none"); , also set  shrinkToFit:true,

oh, $("#list").setGridWidth($("#flexicontent").width()); ---- flexicontent is a div surrounding the whole thing set to a percentage, when u resize ur screen the grid will move too.

Hope you solve it

I also encountered this issue.  It appears to be a bug with the shrinkToFit option not sizing the column headers

correctly (you can even see it on the jQuery grid demos).  It looks like perhaps the table header widths aren't

accounting for the left 1px border when setting the width on the <th> tags so the column headers get

progressively off by 1px.  Rather than hack the jQuery grid code I just made a temporary fix until the

jQuery grid team can fix the issue.  Here's the temporary fix I'm using:

function gridColumnWidthCorrection(gridId) {                
    
    $('#gview_' + gridId + ' .ui-jqgrid-labels th').each(function(i) {
        if($(this).css('display') != 'none') {
            var widthString = $(this).css('width');
            var width = eval(widthString.substr(0, widthString.indexOf('px')));
            $(this).css('width', (width – 1) + 'px');                
        }            
    });        
}

If anyone has a better solution using options in jQuery grid or thinks I've misdiagnosed the problem

please let me know.

Chad

I am specifying the column width in the colModel, and specifying a width property in the grid definition.  

I have tried shrinkToFit to be true and false.  Nothing seems to work.  

When I don't specify the widths then everything lines up, but my columns

aren't the right size and don't show enough data.  Any idea what I am doing wrong?  

Here is my grid definition:

var namesTableGridOptions = {
	url: '${pageContext.request.contextPath}/orderentryajax/getNamelist.do?searchFilter=' + $('#searchText').val(),
	datatype: 'json',
	mtype: 'GET', 	
	jsonReader : {repeatitems: false}, 		
	height: 300,				
	width: 800, 
	shrinkToFit: false,
	rowNum: -1,							
	colNames:['Last Name', 'First and Middle Name', 'Address 1', 'Address 2', 'City', 'State', 'Zip', 'Guid'],   					 
	colModel:[
		{name:'lastName', width: '125', sortable: true},
		{name:'firstName', hidden: false, width: '175' , sortable: true},
		{name:'address1', hidden: false, width: '170', sortable: true},
		{name:'address2', sortable: true, width: '90'},  
		{name:'city', sortable: true, width: '100'},  
		{name:'state', sortable: true, width: '65'},
		{name:'postalCode', width: '75', sortable: true},
		{name:'namelistGuid', hidden: true}
		], 
	viewrecords: true,
	altRows: true,
	altclass: 'ui-jqgrid-alt-row',
	loadonce: true
};

$('#namesTable').jqGrid(namesTableGridOptions);