Как отформатировать Blazor QuickGrid? ⇐ CSS

[Anonymous]

Я работаю над проектом .NET 9 Blazor с помощью QuickGrid. Клиент хочет, чтобы сетка выглядела более похожей на Excel.
Необработанный QuickGrid пытается уместить все данные на экране и добавляет горизонтальные полосы прокрутки для просмотра остальных. Я хотел бы разместить на экране больше данных, что включает в себя перенос ячеек, увеличение ячеек, если этого требуют данные, границы вокруг ячеек.
После нескольких часов игры с CSS, поиска для онлайн-кода и общения с CoPilot мне удалось получить более привлекательную, но все еще несовершенную сетку.
Вопрос № 1: есть ли какие-либо ресурсы о том, как отформатировать QuickGrid?
Я могу Я нахожу только несколько кратких руководств (например, этого), но в основном я просто пытаюсь почерпнуть все, что могу, из комментариев StackOverflow и Reddit.
Вопрос № 2: конкретно для моего случая: как мне дальше отформатировать сетку? Я получил сетку для переноса данных в ячейки и увеличил размер всех ячеек, но также потерял полосы прокрутки внизу. Кроме того, ничего из того, что я пробовал, похоже, не затрагивало строку заголовка.
Я ищу, как:

• Перенос текста в строке заголовка
• Управление форматированием строки заголовка (обратите внимание, что строка заголовка выделена жирным шрифтом без моего указания. Как я могу переопределить это и внести другие изменения (шрифт, цвет, цвет фона и т. д.)?
• Укажите высоту строки (заголовок и данные) имеют динамический размер (обратите внимание, что в примере в ячейках есть пробелы, поскольку высота определена статически)
• Управляйте количеством столбцов, которые я хочу отобразить, и переполняйте остальные справа от экрана, к которому можно получить доступ через полосу прокрутки.
• Имейте более динамический размер ширины (столбец с коротким заголовком и короткими данными будет иметь меньшую ширину, чем столбец с коротким заголовком и короткими данными). более длинный заголовок и короткие данные или короткий заголовок и длинные data)

Вот мой код для QuickGrid:

Код: Выделить всё

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

Вот CSS, который у меня есть на данный момент:

Код: Выделить всё

.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;
}

Вот изображение без CSS. Обратите внимание на полосы прокрутки внизу; Я хотел бы каким-то образом сохранить их, и я не уверен, что в моем CSS заставило их исчезнуть.
[img]https:/ /i.sstatic.net/Qs8Sf7bn.png[/img]

Вот отображение с моим CSS. Обратите внимание, что полосы прокрутки исчезли. Также обратите внимание, что заголовок, похоже, не был затронут никакими изменениями CSS:
[img]https://i.sstatic. net/M6td6LUp.png[/img]


Подробнее здесь: https://stackoverflow.com/questions/793 ... -quickgrid