Tabellen bzw. Spaltenbreite html/CSS

[RobKel86]

<title>Wer liefert Was?</title>
<style>
table#myTable thead {
 position: sticky;
}
table#myTable thead {
 inset-block-start: 0;
}
table#myTable,
table#myTable > thead > tr > th,
table#myTable > tbody > tr > td {
 border: Solid 1px #888888;
 padding: 5px;
}
table#myTable > thead > tr {
 background-color: #ED1C29;
}
table#myTable > tbody > tr:nth-child(even) {
 background-color: #FFFFFF;
}
table#myTable > tbody > tr:nth-child(odd) {
 background-color: #D5E2E9;
}
#myTable { margin-left: 1px; }

</style>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.25/js/jquery.dataTables.min.js"></script>


<table id="myTable", >

  <thead>
    <tr>
      <th>Betriebe</th>
      <th>Betriebe2</th>
      <th>Kred.-Nummer</th>
      <th>Kreditorenname</th>
      <th width:=100>E-Mail</th>
      <th>Mengen</th>
      <th>Zusatzinformationen</th>
      <th>Stichwörter</th>
     
    </tr>
  </thead>
  <tbody>

  </tbody>
</table>

<script type="text/javascript">
  $(document).ready(function() {
    $('#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
        }
      ]
    });
  });
</script>

Hallo miteinander, ich habe mir den Code aus Codeschnipseln zusammengepackt. Nun stehe ich vor dem Problem, dass ich unerwünschte Zeilenumbrüche habe. Wie kann ich z.B. für die Spalte "E-Mail" die Breite vorgeben bzw. auf automatisch ohne Zeilenumbruch setzen? Ich hoffe, es kann mir jemand helfen.

[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

[Gunnar Bittersmann]

@@Rolf B

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

Kompliziert war gestern. Heute ist einfach:

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

That’s :where the fun :is.

---

jQuery war gestern. – Aber das ist eine andere Diskussion.

🖖 Живіть довго і процвітайте

[RobKel86]

Hallo Rolf, dein erster Codeschnipsel hat mir schon sehr geholfen und den gewünschten Erfolg gebracht. Ich nutze diese html firmenintern im Intranet. Falls es bei irgendwelchen Nutzern durch indiv. Browsereinstellungen zu Ansichtsproblemen kommt, muss ich mir das ochmal ansehen, aber im tandard passt das erstmal so. Vielen Dank!!!

[Rolf B]

Hallo RobKel86,

in einer Firma sollte man als Anfänger keine Corporate-Seiten bauen. Beauftragt einen Webentwickler, der sich auskennt. Wenn deine Arbeit darin besteht, Lieferanten zu verwalten, dann wirst Du dafür bezahlt. 30 Stunden Webentwicklung sind 30 Stunden deiner Arbeitszeit, und rechne Dir mal aus, was deine Firma dafür bezahlt (was nicht das ist, was Du bekommst).

Da rechnet sich der externe Dienstleister ganz schnell. Selber ins Thema einsteigen und bauen lohnt nur, wenn der Externe einfach nicht zu bekommen ist.

Just my 2ct…

Rolf