Wie formatiere ich ein Blazor QuickGrid? ⇐ CSS

[Guest]

Ich arbeite an einem .NET 9 Blazor-Projekt mit einem QuickGrid. Der Kunde möchte dem Raster ein eher „Excel-ähnliches“ Aussehen verleihen.
Das rohe QuickGrid versucht, alle Daten auf dem Bildschirm anzuzeigen, und fügt horizontale Bildlaufleisten hinzu, um den Rest anzuzeigen. Ich würde gerne mehr Daten auf den Bildschirm bringen, was das Umbrechen von Zellen, das Vergrößern von Zellen, wenn die Daten dies erfordern, und das Umrahmen von Zellen beinhaltet.
Nach ein paar Stunden Herumspielen mit CSS beginnt die Suche Für Code online und durch Gespräche mit CoPilot ist es mir gelungen, ein besser aussehendes, aber immer noch fehlerhaftes Raster zu erhalten.
Frage Nr. 1: Gibt es Ressourcen dazu? QuickGrid formatieren?
Ich kann nur ein paar finden Kurze Tutorials (wie dieses), aber meistens versuche ich einfach, aus StackOverflow- und Reddit-Kommentaren herauszufinden, was ich kann.
Frage Nr. 2: speziell für meinen Fall : Wie formatiere ich mein Raster weiter? Ich habe das Raster so eingestellt, dass es die Daten in den Zellen umschließt, und habe alle Zellen vergrößert, aber ich habe auch meine Bildlaufleisten unten verloren. Außerdem schien nichts, was ich versucht habe, die Kopfzeile zu berühren.
Ich suche nach einer Anleitung für Folgendes:

• Text in der Kopfzeile umbrechen
• Kontrollieren Sie die Formatierung in der Kopfzeile (beachten Sie, dass die Kopfzeile fett dargestellt ist, ohne dass ich dies angegeben habe. Wie kann ich dies überschreiben und andere Änderungen vornehmen (Schriftart, Farbe, Hintergrundfarbe usw.)?
• Haben Sie die Höhe der Zeilen (Kopfzeile und Daten) mit dynamischer Größe (beachten Sie im Beispiel, dass in den Zellen Leerzeichen vorhanden sind, da die Höhe statisch definiert ist)
• Kontrollieren Sie, wie viele Spalten ich anzeigen und überlaufen lassen möchte Der Rest befindet sich rechts auf dem Bildschirm und ist über eine Bildlaufleiste zugänglich.
• Lassen Sie die Breite dynamischer dimensionieren (eine Spalte mit einer kurzen Kopfzeile und kurzen Daten hätte eine geringere Breite als eine Spalte). mit längerem Header und kurzen Daten oder short Header und lange Daten)

Hier ist mein Code für das QuickGrid:

Code: Select all

item.InboundOriginalFileName" Title="Inbound Original File Name" Class="custom-column-width" />

Hier ist das CSS, das ich bisher habe:

Code: Select all

.custom-column-width {
width: 150px;
white-space: normal;
overflow: hidden;
text-overflow: clip;
text-align: center;
vertical-align: middle;
display: inline-block;
border: solid;
word-wrap: anywhere;
table-layout: fixed;
height: 100px;
}

Hier ist die Darstellung ohne CSS. Beachten Sie die Bildlaufleisten unten. Ich würde diese gerne irgendwie behalten und bin mir nicht sicher, was in meinem CSS dazu geführt hat, dass sie verschwunden sind.
[img]https:/ /i.sstatic.net/Qs8Sf7bn.png[/img]

Hier ist die Anzeige mit meinem CSS. Beachten Sie, dass die Bildlaufleisten verschwunden sind. Beachten Sie außerdem, dass der Header von den Änderungen am CSS scheinbar unberührt bleibt:
[img]https://i.sstatic. net/M6td6LUp.png[/img]