2011-10-30 5 views
1

내 데이터 테이블이 이상하게 보입니다. 나는 그것이 사소한 것이어야한다는 것을 안다. 그러나 나는 그것을 알아낼 수 없다. 그리고 그것은 하루 종일 나를 괴롭 히고있다. 샘플 데이터는 http://datatables.net/에있는 데이터입니다 (부끄럽게 1 : 1로 복사되므로 문제가되지 않습니다). 우연히 모든 기본 CSS 규칙을 덮어 쓰지 않고 기본 jquery 테마 플릭을 편집하지 않았습니다.Jquery datatables가 이상하게 보입니다.

이 내가 내 데이터 테이블을 초기화하는 방법입니다

$('#datatable').dataTable({ 
    "bJQueryUI": true, 
    "sPaginationType": "full_numbers", 
    "bSaveState": true, 
    "aoColumnDefs": [ 
     {'sWidth':'40px', 'aTargets':[0]}, 
     {'sWidth':'350px', 'aTargets':[1]}, 
     {'sWidth':'350px', 'aTargets':[2]} 
    ]}); 

이 얼마나 내 <header>은 다음과 같습니다 보이는 방법을 데이터 테이블의

<script type="text/javascript" src="js/jquery-1.6.2.min.js"></script> 
<script type="text/javascript" src="js/jquery-ui-1.8.16.custom.min.js"></script> 
<script type="text/javascript" src="js/jquery.dataTables.min.js"></script> 
<link type="text/css" rel="stylesheet" href="css/flick/jquery-ui-1.8.16.custom.css" /> 
<link type="text/css" rel="stylesheet" href="css/css3.css" /> 

스크린 샷 :

screenshot of the problem

+0

AAAA가, 내가 선'필요 잊어 필요 <링크 유형 = "텍스트/CSS는"확인해 = "스타일 시트"HREF = "CSS/demo_table_jui.css을"/> '그것이 작동하기 위해서는 ... 그러나 여전히 정렬 화살표는 여전히 이상하게 존재합니다 :/ – Gabriel

+0

셀 테두리는'

' 선이 수평이되도록하는 것입니다. 그리고 고맙습니다. 여러분의'
솔루션도 저에게 효과적입니다. –

답변

1

첫 번째 열을 40px wid로 설정하는 것 같습니다. E :

{'sWidth':'40px', 'aTargets':[0]}, 

하지만 엔진 렌더링 개 이상의 줄로 줄 바꿈하는 헤더 행을 강제과 추함이 일어나는, 40px보다 약간 넓다.

하단의 홀수 보이는 페이징 링크가 복사하는 동안 일부 CSS를 놓친 것처럼 보입니다. 좋아

+0

예 실제로 CSS 누락과 함께 문제가있었습니다 – Gabriel

2

그래서 내가 당신 필요이없이 <table> 태그의 class='display' 비트가 기본보기가 작동하지 않습니다, 나중에 참조 할 수 있도록, 그것을 알아 냈다.

나중에 당신은 또한

<link type="text/css" rel="stylesheet" href="css/demo_table_jui.css" /> 
+0

또한이 문제는 줄 바꿈에 정렬 화살표가있는 문제가 해결되었습니다. –

관련 문제