So legen Sie die Spaltenbreite für DataTables fest

Question

Ich möchte die statische Breite für alle DataTables (mit Scroll-Plugin) Spalten festlegen.

Es macht die Spalten breiter, wenn ich die Breite für alle <th> Tags außer einem festlegen. Und es funktioniert nicht, wenn die Breite für alle Tags festgelegt ist. Plus, wenn ich über die Entwicklerwerkzeuge inspiziere, sehe ich kein <th> Element mit Breite 400px. Die Elemente haben unterschiedliche Breite: 115px, 132px, 145px ...

Warum ist das? Wie kann ich die genaue Breite für Spalten einstellen?

CSS

.big-col { 
    width: 400px; 
} 

JS

var options = { 
    "sScrollX": "100%", 
    "sScrollXInner": "110%", 
    "bScrollCollapse": true, 
    "colReorder": true 
}; 

$(document).ready(function() { 
    $('#example').dataTable(options); 
}); 

Voll Beispiel: http://fiddle.jshell.net/sergibondarenko/o1hoabep/8/

Auch versucht, ich habe die columnDefs Option, ohne Erfolg.

var options = { 
    "columnDefs": [ 
     { "width": "100px", "targets": "_all" } 
    ] 
}; 

Die genaue Anzahl der Spalten ist unbekannt. Die HTML-Tabelle wird dynamisch basierend auf Daten von einer Serverseite erstellt.

Answer 1

th.big-col{ 
width:400px !important; 
} 

table#example{ 
table-layout:fixed; 
} 

Die !important für die Breite ist notwendig, irgendwelche Arten von Inline-Datentabellen angewendet wird, außer Kraft zu setzen, und möglicherweise auch andere Arten von jsfiddle oder was auch immer angewendet wird. Der table-layout:fixed; wird den Tabellenrenderer die Breite der Zellen in der ersten Zeile priorisieren, um die Breite aller Zellen in jeder Spalte zu bestimmen.

Die Geige hat alles 410 anstelle von 400, aufgrund der Polsterung.

http://fiddle.jshell.net/o1hoabep/9/

https://developer.mozilla.org/en-US/docs/Web/CSS/table-layout