Datatables - Ändern der Spaltenbreite mit `columnDefs`

Ich versuche, die Breite von bestimmten Spalten (Umhüllen langen Inhalt UND Kopfzeilen) in einer Tabelle, aber waren nicht erfolgreich.Datatables - Ändern der Spaltenbreite mit `columnDefs`

Nach der Dokumentation here kann ich noch nicht die Breite der angegebenen Spalten anpassen, fehlt mir etwas?

Ich habe folgende Datatable Parameter für eine table mit id=one und width=100%:

$(document).ready(function(){ 
    $('#one').DataTable({ 
     paging: true, 
     'scrollX': false, 
     'autoWidth': false, 
     'columnDefs' : [ 
      {'targets': [0,1], 'width': '50px'} 
     ], 
     "iDisplayLength": 50, 
     'lengthMenu': [[10, 20, 50, 100, -1], [10, 20, 50, 100, "All"]], 
     dom: 'Blfrtip', 
     buttons: ['copy', 'csv', 'excel'] 
    }); 
});

ich keine CSS-Überschreibungen im HTML angegeben haben oder auf andere Weise, so vielleicht ist das Problem?

Quelle

2016-10-17 NickBraunagel

Ich bin mir nicht sicher, Nick, aber ich würde versuchen, den 'autoWidth' Parameter zu entfernen. Dies könnte ein Problem sein, wenn Sie nicht die Breite aller Ihrer Spalten angegeben haben. Ich benutze normalerweise 'columnDefs' nicht (ich benutze' columns' anstatt und formuliere das, was ich für jede Spalte haben möchte), und ich möchte, dass DataTables automatisch Spalten skaliert, für die ich keine Breite festlege. Also verwende ich auch nicht "autoWidth". Das funktioniert bei mir. – BobRodes

Vielen Dank für die Antworten. Nach einigem weiteren Graben wurde mir klar, dass der Tisch mit der Klasse von nowrap eingestellt wurde. So nervig. Nach dem Entfernen dieser Klasse funktioniert der Zeilenumbruch wie gewünscht. Vielen Dank.

Quelle

2016-12-02 22:05:36 NickBraunagel

Welche Daten setzen Sie in die Spalte? Die width-Eigenschaft wird nur auf das Element th angewendet. Wenn also breitere Elemente in den Zellen der Spalte td vorhanden sind, können sie die Spalte breiter als erwartet machen. Zum Beispiel würde ein Bild, das breiter als 50 Pixel ist, die Spalte breiter als 50 Pixel machen.

Quelle

2016-10-17 20:19:43

Alle Daten sind Zeichenfolgen. Guter Punkt auf 'th' versus' td' Updates. Also, gibt es eine Möglichkeit, 'td' zu aktualisieren? – NickBraunagel

@NickBraunagel würde ich nicht. Sie möchten die Breite für die Spalte, also ist 'th' sauberer. Und DataTables werden Strings trotzdem immer mit dem Wortwrap versehen, wenn Sie nichts anderes angeben. Vielleicht haben Ihre Saiten keine Leerzeichen und sind breiter als in 50px passen? Ich habe das vorher noch nie versucht, also weiß ich nicht, was es tun wird. Habe es nicht ausprobiert, weil ich die Spalte nicht schmaler machen wollte, als meine Daten ohnehin passen würden. Ich kann mir nicht vorstellen, warum du das auch kannst, aber ...? – BobRodes

@NickBraunagel AFAIK Sie müssten CSS verwenden, um die 'td' von der' th' zu trennen. Allerdings werden die Zellen den 'width' - oder' max-width'-Deklarationen nicht wirklich folgen, da [Tabellenlayouts entweder feste oder automatische Breitenberechnungen verwenden] (https://www.w3.org/TR/CSS2/tables). html # width-layout). Für die Breite Genauigkeit, die Sie suchen, sind Sie fast fest, den Anzeigewert der Zellen zu "Inline-Block" oder etwas zu ändern. –

Datatables - Ändern der Spaltenbreite mit `columnDefs`

Antwort

Verwandte Themen