Tabellenkopf immer anzeigen, während alle Zeilen angezeigt werden: ausgeblendet;

Question

Ich habe eine dynamische Tabelle und je nach Benutzerereignissen ändert sich die Anzahl der Zeilen in der Tabelle. Meine tr nicht von Klasse .selected sind auf display:none; gesetzt - und es ist durchaus möglich, dass keine Tabellenzeile diese Klasse hat. Das Problem ist, dass die Tabellenüberschrift verschwindet, wenn ich display:none einstelle, außer wenn die ursprüngliche erste Zeile die Klasse selected hat. Mit anderen Worten, nur wenn die erste Zeile ausgewählt ist, erscheint die Kopfzeile. Das macht Sinn, denke ich, aber gibt es da einen Weg, wenn man mit display:none; arbeitet? Ich möchte, dass die Tabellenüberschrift immer sichtbar ist, egal welche Zeilen ausgeblendet sind.

tr:not(.selected) { 
    display:none; 
} 

Ich habe versucht, Dinge wie not(:first-child) hinzuzufügen, aber keiner hat funktioniert. Und bin ich mit diesem Ansatz auf dem richtigen Weg? Ich dachte mir, dass das dynamische Hinzufügen und Entfernen von Zeilen zu viel Iteration oder langsame Dinge bedeuten würde.

Answer 1

Zum einen der Doppelpunkt nach dem not nicht benötigt wird, es so entfernen:

tr:not(.selected) { 
    display: none; 
} 

Da nur Datenzeilen versteckt (im Gegensatz Zeilen-Header), die nicht die .selected Klasse hat, da sind ein paar Möglichkeiten, dies zu erreichen. Was würde ich empfehlen, ist Ihre Tabelle Aufspalten <thead> und <tbody> mit:

<table> 
    <thead> 
    <tr> 
     <th> 
     Heading 1 
     </th> 
     <th> 
     Heading 2 
     </th> 
     <th> 
     .... 
     </th> 
    </tr> 
    </thead> 

    <tbody> 
    <tr> 
     <!-- your data here --> 
    </tr> 
    </tbody> 
</table> 

Dann können Sie die folgenden CSS verwenden, um sicherzustellen, dass nur die Zeilen in den Körper der Tabelle - die Header - verschwinden, ohne die .selected Klasse: