.NET 8 Blazor — кнопки одинакового динамического размера в таблице без JS ⇐ Html

[Anonymous]

Я использую .NET 8 и Blazor и ТОЛЬКО css/html/C# — без JS.
Цель: динамически сопоставить все кнопки с самой большой кнопкой в ​​любой из ячеек. Поскольку любая кнопка может изменить размер (обычно временно становится больше, прежде чем снова сжиматься), все кнопки должны измениться до того же размера, что и самая большая кнопка, но НИКОГДА не расширяйтесь до размера самой большой кнопки (т. е., если таблицу принудительно развернуть полностью, кнопки не будут расширяться до наибольшего размера кнопки. Вместо этого данные/входные данные в других ячейках строки должны заполнить пространство). В некоторых случаях в одной строке может быть 2 кнопки, а в другой - только 1. Строка с единственной кнопкой должна по-прежнему иметь тот же размер, что и самая большая кнопка.
Например: в одной таблице есть кнопки «Редактировать» и «Удалить» — кнопка «Удалить» больше, поэтому «Редактирование» должно масштабироваться до ее размера, и если нажать «Удалить», оно становится «Удалением», поэтому редактирование должно увеличиваться еще больше, пока операция удаления не завершится, и оно не станет «Удалить снова», затем «Редактирование» должно снова уменьшиться. Однако может быть любая комбинация размеров кнопок (длины текста). Это должно произойти для ВСЕХ кнопок внутри любого TableButtonContainer в ЛЮБОЙ ячейке таблицы. Все кнопки должны быть одинакового размера (внутри любого TableButtonContainer).
Между кнопками существует зазор в 0,5 рема, и кнопки могут располагаться в столбце или строке. Но опять же всегда должен быть размер самой большой кнопки
В идеале я хочу сделать это БЕЗ JS. Пожалуйста, используйте исключительно css/html/c#, я хочу, насколько это возможно, избегать JS в Blazor.
В настоящее время: у меня есть компоненты Table, TableButtonContainer и CustomButton. Все они точно знают, сколько кнопок находится в TableButtonContainer.
TableButtonContainer — это просто оболочка для кнопок:

/* Table Button Component / Simply a Wrapper (Actually Called )*/
/*Custom Button Component Actually using here, but showing as the actual format */






Как это выглядит на самом деле:







Я пробовал большое количество решений из сеток данных, гибкости, ширины строк/столбцов / Children.Count, но мне никогда не удавалось заставить их работать идеально.
Моим ближайшим решением было использование повторения шаблона сетки. В результате все кнопки в одной ячейке будут иметь одинаковый размер, но никакая другая строка не изменится.
TableButtonContainer стили:
display:grid;
grid-template-columns: repeat(1, 1fr); /*For vertrical buttons*/
grid-template-columns: repeat(Children.Count, 1fr); /*for row buttons - Children.Count is the # of buttons in the the TableButtonContainer. */
width: max-content;
gap : .5rem;

Table.MaxChildren отслеживает наибольшее количество кнопок в любой строке
Table.MinChildren отслеживает наименьшее количество кнопок в любой из строк
button стиль:
width: 100%;

td стиль:
width: 1%


Подробнее здесь: https://stackoverflow.com/questions/798 ... without-js