jqgrid는 FF, IE의 바디와 헤더를 정렬합니다.

Question

저는 크롬에서 완벽하게 작동하는 jqgrid를 가지고 있습니다. 그러나 IE와 FF에서 나는 이것을 봅니다 :

열 머리글 셀은 표 셀 본문과 일직선으로 정렬되지 않습니다.

jQuery.extend(jQuery.jgrid.defaults, { 

    datatype: 'json', 
    mtype: 'GET', 
    jsonReader: { 
     repeatitems: false, 
     id: "Id" 
    }, 
    pager: '#pager', 
    rowNum: 10, 
    page: '1', 
    sortname: 'Name', 
    sortorder: 'asc', 
    viewrecords: true, 
    caption: null, 
    height: 'auto', 
    scroll: false, 
    altRows: true, 
    altclass: 'altrow', 
    autowidth: true, 
    forceFit: true, 
    rowTotal: 0, 
    loadonce: true, 
    shrinkToFit: true, 
    pginput: false, 
    autoencode: true, 
    multiselect: false, 
    width: '100%' 
}); 

과 특정 테이블 :

$("#ctable").jqGrid({ 
        data: mydata, 
        datatype: "local", 
        colNames: ['Date', 'Urls', 'Errors', 'Warnings', 'Infos', 'Time', 'Size', 'Delete', 'Id Hidden'], 
        colModel: [ 
          { name: 'Date', sorttype: "date", width: 2, datefmt: "m/d/Y H:i:s",editrules:{date:true} }, 
          { name: 'UrlCount', sorttype: "int", width: 1 }, 
          { name: 'ViolationsError', sorttype: "string", width: 1, formatter:violationserrorformatter }, 
          { name: 'ViolationsWarning', sorttype: "string", width: 1, formatter:violationswarningformatter }, 
          { name: 'ViolationsInfo', sorttype: "string", width: 1, formatter:violationsinfoformatter }, 
          { name: 'TimeElapsed', sorttype: "date", width: 1, datefmt: "H:i:s",editrules:{date:true} }, 
          { name: 'Size', sorttype: "number", width: 1 }, 
          { name: 'Delete', sorttype: "", width: 1, align:"center" }, 
          { name: 'Id', sorttype: "int", width: 1, hidden:true } 
         ], 
        sortname: 'Date', 
        sortorder: 'desc', 
        rowNum:20 
       }); 

나는, JS, 주변 템플릿 HTML 스타일 시트를 밖으로 데리고, 심지어 몇을 복용 시도 여기

는 관련 코드 이 오류가 여전히 정렬에있는 것 같습니다. 뭐라고 붙어 있니?

Answer 1

전자 우편을 통해 나를 게시하고 jqGrid의 원본 ui.jqgrid.css을 수정했는지 확인하는 데모를 시험했습니다. 함께 다른 변화는 7px에 th 요소의 padding을 증가 : 당신은 올바른 계산 된 열 폭이 기본적 padding-right: 2px 및 padding-left: 2px를 사용해야합니다

.ui-jqgrid .ui-jqgrid-htable th.ui-th-column 
{ 
    border-bottom:1px solid #ccc; 
    background-color:#EEE; 
    padding:7px; 
} 

.

난 당신이 border-width, padding-right, padding-left, margin-left과의 margin-right 및 th 또는 그리드의 td 요소를 변경하지 않는 것이 좋습니다.

Answer 2

이 코드 블록을 눈금의 gridComplete 이벤트에 삽입하십시오. gridName을 그리드 id으로 교체하면됩니다. :)

var objHeader = $("table[aria-labelledby=gbox_" + gridName+ "] tr[role=rowheader] th"); 

for (var i = 0; i < objHeader.length; i++) { 
    var col = $("table[id=" + gridName+ "] td[aria-describedby=" + objHeader[i].id + "]"); 
    var width= col.outerWidth(); 
    $(objHeader[i]).css("width", width); 
} 

v.4.6.0에서 작동합니다.

Answer 3

이 나를 위해 일한 ..

$. CSS ('최대 폭', '아무도'($ ('. UI-있는 jqGrid - bdiv은'). ('테이블') [0]을 찾을 수 없음))