#angular #sass #primeng #ng-template #p-table
#angular #sass #primeng #ng-шаблон #p-таблица
Вопрос:
Я хотел бы изменить цвет фона моей ячейки заголовка p-table только в одном компоненте, как я могу это сделать?
Я пытался <ng-template pTemplate="caption" class="myStyle">
и .myStyle{ background: rgb(9,169,121) !important; } в my.component.scss
но это не работает.
Помогите мне! Спасибо!
Редактировать: Наконец-то это работает! Я вижу ответ @Antikhippe, но мне пришлось добавить
:host ::ng-deep { #myTable {
.p-datatable-thead{ background: красный;
} .p-datatable .p-datatable-thead > tr > th { background: наследовать; } } }
Комментарии:
1. Результат очень плохой, потому что фон всей ячейки «подписи» не окрашен, а только центральной строки. В любом случае спасибо за ответ.
Ответ №1:
pTemplate="caption" будет соответствовать только части заголовка вашей таблицы, вам придется работать над p-datatable-header классом:
Попробуйте это:
:host ::ng-deep {
#myTable {
.p-datatable-header {
background-color: red;
}
}
}
Я окружил p-datatable-header класс, #myTable чтобы применить этот CSS только для таблицы с myTable идентификатором:
<p-table id="myTable" [value]="products">
См. StackBlitz
Комментарии:
1. Вы можете видеть, что это работает в моем стекблите , вы добавили
idсвойство в свою таблицу?2. Я вижу, что в вашем StackBlitz это работает, но в моем случае это не сработало. К тому, что вы мне сказали, я должен был добавить .p-datatable .p-datatable-thead > tr> th { background: inherit; }