Primeng ermöglicht eine reaktionsfähige Höhe der scrollbaren Datentabelle ⇐ CSS

[Guest]

PrimeNG DataTable bietet eine [scrollable]-Eigenschaft, um vertikales und/oder horizontales Scrollen zu definieren. Dies muss mit einer Kombination aus einer festgelegten scrollHeight und/oder scrollWidth verwendet werden.

Wie kann ich eine Tabelle haben, die sich anpasst? Unabhängig von der Höhe/Breite des Fensters und unter Beibehaltung der Bildlauffunktion?

Hier ist der Code, den ich ausprobiert habe:

Code: Select all

Global search: 

Aber es löst nur das Problem der Reaktionsbreite. Auf dem Screenshot sehen Sie die Tabelle, die horizontal scrollbar ist:



Da das height-Attribut der p-dataTable im Falle eines Prozentwerts relativ zum übergeordneten Element ist, habe ich versucht, das übergeordnete div um den Inhalt anzupassen, indem Sie style="height: 100 %" zum übergeordneten Div. Hier ist der aktualisierte Code:

Code: Select all

Global search: 

Ich habe auch die folgenden Änderungen an meiner „styles.scss“ vorgenommen< /code> Datei, damit es funktioniert (habe dies in einer anderen Frage zu Stackoverflow gefunden):

Code: Select all

html, body {
height: 100%;
}

Aber bei mir hat es auch nicht funktioniert:< img alt="Bildbeschreibung hier eingeben" src="https://i.sstatic.net/MwOhT.png" />
Auf dem Screenshot scheint die Höhe zu stimmen, stimmt aber nicht. Wenn ich nach unten scrolle, läuft es zunächst so, wie es sollte, aber wenn ich mich dem Ende der Tabelle nähere, verschwindet die Bildlaufleiste aus der Ansicht, sodass ich sie nicht sehen kann, solange ich noch scrollen kann. Die Datentabelle scheint also etwas höher zu sein, als sie sein sollte.

Wie löse ich das? Jede Hilfe wäre dankbar!