jQuery Datatables에서 고정 열 너비 지정

Question

jQuery 데이터 테이블에서 몇 개의 열에 대해 고정 너비를 지정하려고합니다. datatables documentation에 지정된 열 정의를 통해이 작업을 시도했지만 열과 열 머리글은 자동 크기 조정을 계속합니다. jsFiddle

자바 스크립트 : 여기

는 jsFiddle 내가 함께 일하고 한 것

var table = $('#example2').DataTable({ 
     "tabIndex": 8, 
     "dom": '<"fcstTableWrapper"t>lp', 
     "bFilter": false, 
     "bAutoWidth": false, 
     "data": [], 
     "columnDefs": [ 
      { 
       "class": 'details-control', 
       "orderable": false, 
       "data": null, 
       "defaultContent": '', 
       "targets": 0 
      }, 
      { 
       "targets": 1}, 
      { 
       "targets": 2, 
       "width": "60px"}, 
      { 
       "targets": 3, 
       "width": "1100px"}, 
      { 
       "targets": 4}, 
      { 
       "targets": "dlySlsFcstDay"}, 
      { 
       "targets": "dlySlsFcstWkTtl", 
       "width": "60px"} 
     ], 
     "order": [ 
      [1, 'asc'] 
     ] 
    }); 

HTML :

<div class="forecastTableDiv"> 
      <table id="example2" class="display" cellspacing="0" width="100%"> 
       <thead> 
       <tr> 
        <th colspan="5"></th> 
        <th class="slsFiscalWk" colspan="8">201424</th> 
        <th class="slsFiscalWk" colspan="8">201425</th> 
        <th class="slsFiscalWk" colspan="8">201426</th> 
        <th class="slsFiscalWk" colspan="8">201427</th> 
       </tr> 
       <tr> 
        <!--<th></th>--> 
        <!--<th>Vendor</th>--> 
        <!--<th>Origin ID</th>--> 
        <!--<th>Destination</th>--> 
        <!--<th>Vendor Part Nbr</th>--> 
        <!--<th>SKU</th>--> 
        <!--<th>Mon</th>--> 
        <!--<th>Tue</th>--> 
        <!--<th>Wed</th>--> 
        <!--<th>Thu</th>--> 
        <!--<th>Fri</th>--> 
        <!--<th>Week Ttl</th>--> 

        <th></th> 
        <th>Vendor</th> 
        <th>Origin ID</th> 
        <th style="width: 200px">Vendor Part Nbr</th> 
        <th>SKU</th> 
        <!-- First week --> 
        <th class="dlySlsFcstDay" >Mon</th> 
        <th class="dlySlsFcstDay" >Tue</th> 
        <th class="dlySlsFcstDay" >Wed</th> 
        <th class="dlySlsFcstDay" >Thu</th> 
        <th class="dlySlsFcstDay" >Fri</th> 
        <th class="dlySlsFcstDay" >Sat</th> 
        <th class="dlySlsFcstDay" >Sun</th> 
        <th class="dlySlsFcstWkTtl" >Week Ttl</th> 
        <!-- Second week --> 
        <th class="dlySlsFcstDay" >Mon</th> 
        <th class="dlySlsFcstDay" >Tue</th> 
        <th class="dlySlsFcstDay" >Wed</th> 
        <th class="dlySlsFcstDay" >Thu</th> 
        <th class="dlySlsFcstDay" >Fri</th> 
        <th class="dlySlsFcstDay" >Sat</th> 
        <th class="dlySlsFcstDay" >Sun</th> 
        <th class="dlySlsFcstWkTtl" >Week Ttl</th> 
        <!-- Third week --> 
        <th class="dlySlsFcstDay" >Mon</th> 
        <th class="dlySlsFcstDay" >Tue</th> 
        <th class="dlySlsFcstDay" >Wed</th> 
        <th class="dlySlsFcstDay" >Thu</th> 
        <th class="dlySlsFcstDay" >Fri</th> 
        <th class="dlySlsFcstDay" >Sat</th> 
        <th class="dlySlsFcstDay" >Sun</th> 
        <th class="dlySlsFcstWkTtl" >Week Ttl</th> 
        <!-- Fourth and final week --> 
        <th class="dlySlsFcstDay" >Mon</th> 
        <th class="dlySlsFcstDay" >Tue</th> 
        <th class="dlySlsFcstDay" >Wed</th> 
        <th class="dlySlsFcstDay" >Thu</th> 
        <th class="dlySlsFcstDay" >Fri</th> 
        <th class="dlySlsFcstDay" >Sat</th> 
        <th class="dlySlsFcstDay" >Sun</th> 
        <th class="dlySlsFcstWkTtl" >Week Ttl</th> 
       </tr> 
       </thead> 

       <tfoot> 
      </table> 
     </div> 

나는 라이브 코드를 검사 할 때, 내가 할 수있는 컬럼 정의에서 지정하는 너비가 C에 추가되는 것을 보아라. olumn을 스타일 속성으로 사용하지만 열의 실제 너비와 일치하지 않습니다.

Answer 1

이것은 데이터 테이블 문제가 아닙니다. how column widths are determined을 참조하십시오. 이 알고리즘을 기반으로 다음과 같은 두 가지 해결책을 볼 수 있습니다.

용액 1

하면 자신에게 나타난 폭을 계산하고 그에 따라 설정.

#example { 
    width: 3562px; 
} 

여기에 라이브 예제를 참조하십시오 : http://jsfiddle.net/cdog/jsf6cg6L/.

해결책 2

최소 폭 콘텐츠 각 셀 (MCW)를 설정 한 후 열 폭을 결정하는 사용자 에이전트하자.

.col-2, 
.dlySlsFcstWkTtl { 
    min-width: 60px; 
} 

.col-3 { 
    min-width: 1100px; 
} 

참조 :

var table = $('#example').DataTable({ 
    tabIndex: 8, 
    dom: '<"fcstTableWrapper"t>lp', 
    bFilter: false, 
    bAutoWidth: false, 
    data: [], 
    columnDefs: [{ 
    class: 'details-control', 
    orderable: false, 
    data: null, 
    defaultContent: '', 
    targets: 0 
    }, { 
    targets: 1 
    }, { 
    class: 'col-2', 
    targets: 2 
    }, { 
    class: 'col-3', 
    targets: 3 
    }, { 
    targets: 4 
    }, { 
    targets: 'dlySlsFcstDay' 
    }, { 
    targets: 'dlySlsFcstWkTtl' 
    }], 
    order: [[1, 'asc']] 
}); 

그런 다음 각 클래스의 최소 폭 속성의 원하는 값을 설정 :

그들 스타일을 할 수 있도록 목표 컬럼에 클래스를 추가, 이렇게하려면 여기에 사는 예제 : http://jsfiddle.net/cdog/hag7Lpm5/.

Answer 2

Here is a code sample (fixed the column width for 4 column table) :

1. 세트 autoWidth : FALSE;
2. 첫 번째 3 열에 px 값을 설정합니다.
3. 중요 : 테이블 너비가 3 열 + 마지막 열보다 약간 큰지 확인하십시오.

4. 테이블 너비와 4 번째 열을 조정하십시오.

   $('#example').DataTable({ //four column table 
       autoWidth: false, //step 1 
       columnDefs: [ 
        { width: '300px', targets: 0 }, //step 2, column 1 out of 4 
        { width: '300px', targets: 1 }, //step 2, column 2 out of 4 
        { width: '300px', targets: 2 } //step 2, column 3 out of 4 
       ] 
   }); 
   

세트 테이블 폭 4 * 300 픽셀 :

 #example { width: 1200px }; 

으로는 유연하게됩니다 300 픽셀의 폭과 마지막 하나를 1 일 3 열을 볼 약 150 픽셀 (추가 요구하는 것입니다 결과 조정).

---

마지막으로 : 고정 열 크기 셀이 너무 오래 (> 공백없이 300 픽셀) 단어가 포함되어있는 경우 300 픽셀이 사건에서 당신을 방지 할 수 없습니다. 따라서 모든 단어는 고정 된 부분보다 작아야한다는 것을 명심해야합니다. <table> 태그

Answer 3

또는 css class or css id 다음 스타일을 추가합니다.

`table{ 
    margin: 0 auto; 
    width: 100%; 
    clear: both; 
    border-collapse: collapse; 
    table-layout: fixed; 
    word-wrap:break-word; 
}`