Specificare una larghezza fissa della colonna in Datatables jQuery

Question

Sto provando a specificare una larghezza fissa per alcune colonne in un datatable jQuery. Ho tentato di farlo tramite le definizioni di colonna specificate nello datatables documentation, ma l'intestazione di colonna e colonna viene comunque ridimensionata automaticamente.

Ecco il jsFiddle ho lavorato con: jsFiddle

JavaScript:

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> 

Quando ho ispezionare il codice dal vivo, posso vedi che la larghezza che sto specificando nella definizione della colonna viene aggiunta al c olumn come attributo di stile, ma non corrisponde alla larghezza effettiva della colonna.

Answer 1

Questo non è un problema DataTables. Vedi how column widths are determined. Sulla base di questo algoritmo vedo le seguenti due soluzioni.

Soluzione 1

Calcolate voi stessi la larghezza della tabella e impostare di conseguenza.

#example { 
    width: 3562px; 
} 

vedi esempio vivo qui: http://jsfiddle.net/cdog/jsf6cg6L/.

Soluzione 2

Impostare la larghezza del contenuto minimo (MCW) di ciascuna cella e lasciare che l'agente utente per determinare la larghezza delle colonne.

A tale scopo, aggiungere le classi per le colonne di destinazione per essere in grado per lo stile di loro:

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

quindi impostare il valore desiderato della proprietà larghezza minima per ogni classe:

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

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

See esempio live qui: http://jsfiddle.net/cdog/hag7Lpm5/.

Answer 2

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

1. set autoWidth: false;
2. imposta valori px sulle prime 3 colonne;
3. importante: controllo se la larghezza della tabella è un po 'più di 3 colonne + finale one;

4. regolare la larghezza della tabella e 4 ° colonna.

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

impostare la larghezza tavolo, 4 * 300px:

 #example { width: 1200px }; 

Come risultato si vedrà 1st 3 colonne con 300px di larghezza e quella finale sarà flessibile e circa 150px (che richiede ulteriori regolazione).

---

Ultimo ma non meno importante: dimensioni colonna fissa 300px non vi impedisce di caso quando la cella contiene una parola troppo a lungo (> 300 px senza spazi). Quindi devi tenere a mente che tutte le parole devono essere inferiori al lato fisso della colonna.

Answer 3

per il tag <table> o il suo css class or css id aggiungere il seguente stile:.

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