Angeben einer festen Spaltenbreite in jQuery Datatables

Question

Ich versuche, eine feste Breite für ein paar Spalten in einer jQuery Datentabelle anzugeben. Ich habe versucht, dies über die Spaltendefinitionen zu erreichen, die in der datatables documentation angegeben werden, aber die Spalten- und die Spaltenüberschrift werden immer noch automatisch sortiert.

Hier ist die jsFiddle Ich habe mit gearbeitet: 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> 

Wenn ich den Live-Code überprüfen, kann ich Beachten Sie, dass die Breite, die ich in der Spaltendefinition angegeben habe, zum c hinzugefügt wird olumn als Stilattribut, stimmt jedoch nicht mit der tatsächlichen Breite der Spalte überein.

Answer 1

Dies ist kein DataTables-Problem. Siehe how column widths are determined. Basierend auf diesem Algorithmus sehe ich die folgenden zwei Lösungen.

Lösung 1

sich die Tabellenbreite ermitteln und entsprechend eingestellt.

#example { 
    width: 3562px; 
} 

Siehe anschauliches Beispiel hier: http://jsfiddle.net/cdog/jsf6cg6L/.

Lösung 2

Stellen auf den Mindestgehalt Breite (MCW) jeder Zelle und lassen den User-Agent die Spaltenbreiten zu bestimmen.

Um dies zu tun, fügen Sie Klassen der Zielspalte der Lage sein, sie stylen:

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

Dann für jede Klasse des gewünschten Wert der minimalen Breite Eigenschaft:

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

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

See Live-Beispiel hier: http://jsfiddle.net/cdog/hag7Lpm5/.

Answer 2

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

1. Satz AUTOBREITE: false;
2. px-Werte auf die ersten 3 Spalten setzen;
3. wichtig: Überprüfen Sie, ob die Tabellenbreite etwas mehr als 3 Spalten + letzte ist;

4. passen Sie die Tischbreite und 4. Spalte an.

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

Set Tischbreite, 4 * 300px:

 #example { width: 1200px }; 

Wie führen Sie ersten 3 Spalten mit 300px Breite und der letzte wird man flexibel sein, sehen und über 150px (die zusätzlich benötigt Anpassung).

---

Last but not least: feste Spaltengröße 300px werden Sie von dem Fall nicht verhindern, wenn die Zelle eine zu lange (> 300px ohne Leerzeichen) Wort enthält. Sie müssen also beachten, dass alle Wörter kleiner als die feste Seite Ihrer Spalte sein müssen.

Answer 3

für die <table> Tag oder seine css class or css id fügen Sie die folgende Art:.

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