web-dev-qa-db-fra.com

Modifier la largeur de la colonne p

Je suis dans un projet où j'ai besoin d'utiliser PrimeNG pour faire des tableaux et j'ai un problème avec la définition de la largeur de la première colonne.

Dans mon code HTML, j'ai quelque chose comme:

<p-datatable styleClass="myTable">
     <p-column>

     </p-column>
     ...
</p-datable>

Et dans mon CSS, j'ai quelque chose comme:

.myTable td:nth-child(1) {
    width:300px;
}

J'ai également essayé avec le code HTML suivant:

 <p-datatable>
     <p-column styleClass="col1">

     </p-column>
     ...
 </p-datable>

Et dans mon CSS:

td.col1 {
    width: 300px;
}

Et j'ai aussi inspecté le code et vu la classe de la ligne qui est tr.ui-widget-content ui-datatable-even et essayé le CSS suivant:

tr.ui-widget-content ui-datatable-even td:nth-child(1) {
    width: 500px !important;
}

Et rien ne semble fonctionner.

Quelqu'un peut-il me dire s'il est possible de définir la largeur de la colonne et, si oui, comment puis-je le faire?

csswidthprimeng
11
Daniel Serrão

Vous pouvez définir la largeur manuellement, essayez ceci:

<p-column [style]="{'width':'300px'}" </p-column>
23
David Pascoal

Si vous travaillez avec angulaire, vous pouvez mettre à jour le fichier css pour modifier le style PrimeNg avec l'exemple de code suivant,

:Host /deep/ .ui-datatable{
    width: 500px;
}

Pour plus d'informations sur Shadow DOM, veuillez consulter https://blog.oughttram.io/angular/2015/06/29/shadow-dom-strategies-in-angular2.html

4
Karan2020