PrimeNG p-таблица: невозможно переопределить динамическую ширину: Xpx! Важно для замороженных столбцов (Angular) ⇐ Html

[Anonymous]

Я использую p-таблицу PrimeNG в компоненте Angular с горизонтальной прокруткой, столбцами изменяемого размера и комбинацией pFrozenColumn слева (флажок и имя) и справа (кнопки действий).
Основная проблема заключается в том, что PrimeNG автоматически генерирует чрезвычайно агрессивное правило CSS фиксированной ширины с помощью внедренного тега с динамическим идентификатором. (например, #pn_id_1-table). Это правило устанавливает необсуждаемую фиксированную ширину в пикселях и максимальную ширину с помощью !important для определенных элементов и .
Пример сгенерированного успешного CSS (из моих инструментов разработки):
CSS
#pn_id_1-table > .p-datatable-thead > tr > th:nth-child(1),
#pn_id_1-table > .p-datatable-tbody > tr > td:nth-child(1) {
width: 30px !important; /* Forces checkbox column to be 30px */
max-width: 30px !important;
}

Это правило полностью переопределяет стили моих компонентов, которым необходимо устанавливать ширину в зависимости от содержимого (width: auto, min-width: fit-content) для размещения переменного содержимого и значков.
Что я пробовал (битва за специфичность)
Я использовал CSS-методы с наивысшей специфичностью в своем SCSS-файле компонента (test-candidates-report.component.scss), и тем не менее, селектор динамического идентификатора продолжает побеждать, указывая на то, что специфичность идентификатора в сочетании с !important выше, чем у моих связанных классов.
Мое неудачное правило CSS: (Использование классов с двойной цепочкой для повышения специфичности):
SCSS
/* From test-candidates-report.component.scss */

::ng-deep .candidate-test-table.candidate-test-table >.p-datatable> .p-datatable-table-container> .p-datatable-table > .p-datatable-thead> tr > th:nth-child(1){
background: green; /* I use this to see if the rule is winning—it is NOT */
width: auto !important ;
max-width: none !important;
min-width: fit-content !important;
}

/* For the general table structure (which is winning, but not enough for the columns) */
::ng-deep .candidate-test-table .p-datatable-table {
width: 100% !important;
min-width: 100% !important;
}

На снимке экрана ясно показано, что сгенерированное правило #pn_id_X-table превосходит мое узкоспециализированное правило двойной цепочки.
Сведения о среде и компонентах

• Версия Angular: [Пожалуйста, укажите свою версию Angular, например, 17.x.x]
• Версия PrimeNG: [Укажите свою версию PrimeNG, например, 17.x.x]
• HTML p-Table (соответствующие свойства):

HTML



...
...

Action





...
...
...





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