ueberschrift Tabelle

[black79]

Hallo,

hier meine Tabelle : https://oesoft.de

die Spalten der Überschrift (position:fixed
) bedecken die erste Zeile der Tabelle  

Code:

<div class="container_table">
    
   <h5 class="ueberschrift_table"> TABELLE | OHNE FILTER </h5>

   <div class="container_scroll" id="table">
    <table>
     <thead>
      <tr>
      <th class="zustaendigkeit"></th>
      <th class="schnittstelle"></th>
      <th class="uhrzeit">UHRZEIT</th>
      <th class="kennung">KENNUNG</th>
      <th class="sub"></th>
      <th>TAKTISCHE EINHEIT</th>
      <th>STANDORT</th>
      <th></th>
      <th></th>
      <th></th>
      <th></th>
     </tr>
    </thead>
     <tbody class="display_table" id="jstable_test">
    
    </tbody>
   </table>
  </div>
  </div>

Code:

th {
     border: 1px solid Gray;
     background-color: #F2F2F2;
     font-family: system-ui;
     font-weight: 100;
     padding: 5px;
}

td {
     border: 1px solid Gray;
     text-align: left;
     padding: 3px;
}

thead {
     color: gray;
     position:fixed;
     margin-top: 0px;
}

.display_table {
     display: block;
}

[rzscout]

Wieso position: fixes??? Wieso?

---

Du solltest deine Tabelle nicht mit 'position: fixed;' austatten. Verwende 'p' anstatt den 'font'-Tag. Du solltest nicht der Tabelle die CSS-Eigenschaft 'overflow', sondern dem Elternelement 'jstable_test'. Verwende keinen width-Attribut in den td-Tags. Gebe der Tabelle eine feste Größe. Am besten gebe dem Elternelement die CSS-Eigenschaft 'overflowcroll' und gebe den Elternelement eine feste Größe. Die Größe der Tabelle solltest du auf 100%.


Viele Grüße

rzscout

[black79]

Wieso position: fixes??? Wieso?

---

Du solltest deine Tabelle nicht mit 'position: fixed;' austatten. Verwende 'p' anstatt den 'font'-Tag. Du solltest nicht der Tabelle die CSS-Eigenschaft 'overflow', sondern dem Elternelement 'jstable_test'. Verwende keinen width-Attribut in den td-Tags. Gebe der Tabelle eine feste Größe. Am besten gebe dem Elternelement die CSS-Eigenschaft 'overflowcroll' und gebe den Elternelement eine feste Größe. Die Größe der Tabelle solltest du auf 100%.


Viele Grüße

rzscout

 Guten Morgen,

 also ich soll einiges über JavaScript DOM Elemente regeln bzw. CSS über Typselektoren.
 Wenn ich Dich richtig verstanden habe.

"position: fixed" kommt raus !

    Danke

[rzscout]

Folgendes: Ich würde auch empfehlen eine Pagination einzuühren. Keiner liest sich alle Werte durch, da würde eine Pagination weiter helfen. Du solltest auch dich an den HTML5-Standard halten wenn du diesen oben so deklariert hast. Also keine font-Tags in HTML mehr. Verwende auch nicht in den td-Tags das Attribut width - hier solltest du mit CSS arbeiten. Es ist wichtig so gut wie möglich HTML von CSS zu trennen. Das gillt auch für JavaScript. Hier sollte man ein Inline-Skript verwenden.

[black79]

Folgendes: Ich würde auch empfehlen eine Pagination einzuühren. Keiner liest sich alle Werte durch, da würde eine Pagination weiter helfen. Du solltest auch dich an den HTML5-Standard halten wenn du diesen oben so deklariert hast. Also keine font-Tags in HTML mehr. Verwende auch nicht in den td-Tags das Attribut width - hier solltest du mit CSS arbeiten. Es ist wichtig so gut wie möglich HTML von CSS zu trennen. Das gillt auch für JavaScript. Hier sollte man ein Inline-Skript verwenden.

Ok, werde hier noch einiges nachlesen müssen   aber das ist der Lerneffekt.
Pagination "ist schon nicht ohne!" für einen Anfänger oder?

Versuche mich jetzt erstmal von Boostrap zu trennen, und dementsprechend alles mit CSS umzusetzen.
Werde Deine Vorschläge bzw. Deine Hilfe versuchen nach und nach umzusetzen.

Danke für Deine Hilfe

[rzscout]

Aller Anfang ist schwer, wenn man viel mit jQuery und Bootstrap gearbeitet hat muss sich umorientieren, aber dafür hast die volle Kontrolle über deine Elemente und kannst selber festlegen wie die Inhalte via CSS gestaltet werden.

Ich habe in der Vergangenheit viel mit Bootstrap gearbeitet. Ich war nie der größte Fan, aber man konnte einiges damit erreichen. Heutzutage ist das alles überflüssig und zu 100% durch reines CSS austauschbar. Du brauchst nicht mehr dich an Bootstrap orientieren sondern kannst dich auf die Standards von HTML5 und CSS3 konzentrieren. Damit sparst du auch Traffic und Performance.

VG
rzscout

[admin]

Ok, werde hier noch einiges nachlesen müssen   aber das ist der Lerneffekt.
Pagination "ist schon nicht ohne!" für einen Anfänger oder?

Das mit der Pagination hatten wir ja schon mal
https://basti1012.bplaced.net/index.php?...criptforum&id=793

So schwer ist es eigentlich nicht und besser als immer alle Daten zu holen , gerade bei Tabellen mit mehreren hunderten Einträgen.

Hier hatte ich mal Beis