jQuery Datatables'de sabit bir sütun genişliği belirtme

Question

Bir jQuery veritabamında birkaç sütun için sabit bir genişlik belirtmeye çalışıyorum. Bunu, datatables documentation'da belirtilen sütun tanımları aracılığıyla gerçekleştirmeyi denedim, ancak sütun ve sütun başlığı hala otomatik boyut alıyor. jsFiddle

JavaScript: Burada

jsFiddle ben birlikte çalışıyoruz ediyor

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> 

Ben canlı kodlarını incelemek, ben can sütun tanımında belirttiğim genişliğin c'ye eklendiğini görmek Bir stil özelliği olarak olumn, ancak sütunun gerçek genişliğine uymuyor.

Answer 1

Bu bir DataTables sorunu değil. Bakınız how column widths are determined. Bu algoritmaya dayanarak aşağıdaki iki çözümü görüyorum.

Çözelti 1

Kendine tablo genişliği hesaplamak ve buna uygun olarak ayarlayın.

#example { 
    width: 3562px; 
} 

burada canlı örneğe bakın: http://jsfiddle.net/cdog/jsf6cg6L/.

Çözelti 2

asgari içerik genişliği her bir hücrenin (MCW) ayarlamak ve sütun genişlikleri belirlemek için kullanıcı bir madde sağlar.

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

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

See:

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']] 
}); 

Daha sonra her sınıf için minimum genişlik özelliğinin istenen değeri ayarlayın:

onlara stil edebilmek için hedef sütunlara sınıfları ekleyin Bunu yapmak için Burada canlı örnek: http://jsfiddle.net/cdog/hag7Lpm5/.

Answer 2

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

1. grubu autoWidth: yanlış;
2. px değerlerini ilk 3 sütuna ayarlayın; Tablo genişliğinin 3 sütundan daha fazla olup olmadığını kontrol edin; Tablo genişliğini ve 4. sütunu

3. .

   $('#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 
       ] 
   }); 
   

ayarlayın tablo genişliği, 4 * 300 piksel:

 #example { width: 1200px }; 

olarak, esnek olacaktır 300 piksel genişliğe ve son bir ile 1 3 sütun görüp yaklaşık 150px (ek gerektiren olacak neden) ayarlanması.

---

Son olarak: sabit sütun boyutu hücre bir çok uzun (> boşluksuz 300px) kelimesini içerdiğinde 300px durumda sizi engellemez. Bu nedenle, tüm kelimelerin sütununun sabit kısmından daha az olması gerektiğini unutmayın. <table> etiket için

Answer 3

veya onun css class or css id şu stil eklemek.

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