Мобильная версия
Итак, я хочу создать подобную фигуру, где каждый стол имеет максимум 20 стульев и название статистики внутри него максимум для 13 человек, и я хочу быть динамичным (добавление новых стульев и людей), а также стулья будут менять цвет в зависимости от статус.
.box { ширина: 300 пикселей; высота: 300 пикселей; } .эллипс { ширина: 100%; высота: 100%; цвет фона: #ffffff; радиус границы: 50%; положение: относительное; } .table-обертка { позиция: абсолютная; верх: 50%; осталось: 50%; трансформировать: транслировать(-50%, -50%); ширина: 90%; высота: 90%; дисплей: гибкий; гибкое направление: строка; оправдание-содержание: центр; выровнять-элементы: по центру; } .element { маржа: 2%; семейство шрифтов: «Cairo-Bold», Helvetica; вес шрифта: 700; цвет: #000000fa; выравнивание текста: по центру; межбуквенный интервал: 0; высота строки: нормальная; направление: rtl; } .label .text-wrapper { цвет: #000000fa; } .label .span { цвет: #00000063; } .label .text-wrapper-2 { цвет: #0000004a; } .круг { ширина: 1,1рем; высота: 1,1 рем; радиус границы: 50%; граница: сплошная 1 пиксель #2f80ed; дисплей: гибкий; оправдание-содержание: центр; выровнять-элементы: по центру; цвет: #2f80ed; начертание шрифта: жирный; положение: относительное; размер шрифта: 0,6рем; } .число { позиция: абсолютная; верх: 50%; осталось: 50%; ширина: подходящее содержимое; высота: подходящее содержание; трансформировать: транслировать(-50%, -50%); } .сворачивать { дисплей: гибкий; выровнять-элементы: гибкий старт; } .col-wrap { дисплей: гибкий; гибкое направление: столбец; выровнять-элементы: гибкий старт; положение: относительное; } .element { нижнее поле: 10 пикселей; положение: относительное; } .зеленый { граница: 1 пиксель, сплошной RGB (47, 237, 136); цвет: RGB(47, 237, 136); 12 12 ليلى (20)
У меня проблема: добавление новых людей в таблицу не соответствует таблице в форме круга, поэтому я хочу, чтобы все люди находились внутри таблицы, где она динамически сортируется.
