데이터 테이블 헤더 너비/정렬 문제

내 헤더가 테이블과 올바르게 정렬되지 않는 데이터 테이블 jquery 플러그인에 문제가 있습니다. 나는 cellspacing = 0을 테이블에 추가하면 올바르게 정렬된다는 것을 알아 차렸다. 그러나이 속성은 HTML5에서는 제공되지 않으므로 가능하면 HTML5에서도이 속성을 사용하고 싶습니다. 점선으로 표시된 경계선을 보면 머리글은 내용 표 행과 일치합니다.데이터 테이블 헤더 너비/정렬 문제

여기 테이블을 만들 때 사용하는 자바 스크립트가 있습니다.

myTableHere = $('#MyTableHere').dataTable({ 
    'sScrollY': '100px', 
    'bPaginate': false, 
    'bScrollCollapse': true, 
    'bFilter': false, 
    'bInfo': false, 
    'bSort': false, 
    "aoColumns": [ 
     { "sWidth": "95px" }, 
     { "sWidth": "267px" }, 
     { "sWidth": "77px" }, 
     { "sWidth": "90px" }, 
     { "sWidth": "90px" }, 
     { "sWidth": "42px" } 
    ] 
});

이것은 최신 버전의 크롬에서 볼 수 있습니다. enter image description here

여기에 데이터를 작성하기 전에 샘플 HTML이 나와 있습니다. https://gist.github.com/anonymous/d44360d3a06c1a5b2898

편집 : 헤더 붕괴 (border collapse)를 추가하여 문제를 해결했습니다.

출처

2013-03-20 Justin

표의 일부 샘플 HTML을 추가 할 수 있습니까 (헤더와 실제 행이 포함 된 경우)? –

HTML pre "datatabled"또는 게시 "datatabled" – Justin

pre - 무엇을 시작하고 있습니까? –

데이터 테이블 플러그인을 사용하고있는 테이블에서 border-collapse: collapse; CSS 속성을 적용했습니다. 플러그인이 내 테이블을 tabifying 완료 한 후에도이 속성은 여전히 콘텐츠 테이블에 적용되고있었습니다. 그러나 별도의 헤더 테이블에는이 CSS 속성이 적용되지 않았습니다. 헤더 테이블을 테두리 붕괴로 설정 한 후에는 줄이 올바르게 정렬됩니다.

출처

2013-03-20 16:33:55 Justin

데이터 테이블 헤더 너비/정렬 문제

답변

관련 문제