Tabellen bzw. Spaltenbreite html/CSS

[Rolf B]

Hallo RobKel86,

das ist nicht ganz so einfach, weil Du Spalten dynamisch ein- und ausblendest. Im HTML ist die Mail-Spalte die fünfte, aber in der Anzeige die vierte.

Soll die betriebe2 Spalte dauerhaft ausgeblendet sein, so dass in der Anzeige die Mail-Spalte immer die vierte ist?

In diesem Fall könntest Du mit diesem CSS die Zeilenumbrüche verhindern:

#myTable td:nth-of-type(4) {
   white-space: pre;
}

Die Breitenangaben, die Du gemacht hast, sind ohnehin

(a) falsch: der Doppelpunkt gehört nicht vor das = und es ist auch guter Brauch, Attributwerte in Anführungszeichen zu setzen
(b) unresponsiv: 100 wird als Pixel interpretiert und wenn irgendwer die Fontsize in seinem Browser anders hat als Du, passt es nicht
(c) unnötig: Normalerweise passt der Browser die Spaltenbreite an den Inhalt an.

Das DataTable Plugin ist da allerdings auch selbst heftig aktiv. Zum Beispiel berechnet es die erforderliche Anzeigebreite für die Tabelle und nagelt die Tabelle dann darauf fest. D.h. wenn Du die Fensterbreite veränderst, passt sich die Tabelle nicht an. Das kannst Du mit der Option "autoWidth": false abschalten.

Leider ist das Plugin auch nicht hilfreich dabei, mit ausgeblendeten Spalten umzugehen (zumindest habe ich in den 10 Minuten, die ich im Handbuch gestöbert habe, nichts gefunden). Wenn Du mit den Mitteln des Plugins vorgehen willst, kannst Du die Klasse dt-body-nowrap verwenden und sie den Zellen der Spalte 5 - äh nein, nach Ausblenden ist es die 4 - zuweisen. Das geht so:

$('#myTable').DataTable({
  "searching": true, // aktiviert die Suche
  "paging": false, // deaktiviert die Seitennavigation
  "info": false, // deaktiviert die Informationen zum Datensatz
  "columnDefs": [
     {
       "targets": [1], // Index der Spalte, die ausgeblendet werden soll
       "visible": false // Ausblenden der Spalte
     },
     {
       "targets": [7], // Index der Spalte, die ausgeblendet werden soll
       "visible": false // Ausblenden der Spalte
     },
     {
       "targets": [4], // Index der Spalte (nach Anwendung von visible)
       "className": "dt-nowrap" // Kein Zeilenumbruch in der Spalte
     }
  ]
});

Das setzt allerdings voraus, dass Du auch das DataTables Stylesheet einbindest. Wenn Du das nicht willst, füge deinen eigenen Styles ein

table.dataTable th.dt-nowrap,
table.dataTable td.dt-nowrap {
  white-space: nowrap;
}

hinzu.

Das Einhüllen der Initialisierung in den ready-Handler von jQuery ist übrigens nicht nötig, wenn das Script so wie bei Dir am Ende des body steht.

Rolf