PrimeNg changement p-largeur de colonne

Je suis dans un projet où j'ai besoin d'utiliser PrimeNg à faire des tables 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:

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

Aussi 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 fait inspecter le code et vu la classe de la ligne qui est tr.ui-widget-content de l'interface utilisateur-datatable-même et j'ai essayé le CSS..

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

Et rien ne semble fonctionner. Quelqu'un peut me dire si il est possible de définir la largeur de la colonne et dans l'affirmative, comment puis-je le faire?

Merci pour toute les réponses...

Plus de lecture sur le remplacement angulaire css: concretepage.com/angular-2/...

OriginalL'auteur Daniel Serrão | 2016-08-26

  1. 22

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

    <p-column [style]="{'width':'300px'}" </p-column>
    Merci, cela fonctionne!
    encore du mal à croire que c'est la meilleure solution :-/
    remarque: width n'a pas réellement besoin d'être entre guillemets, mais si vous essayez de centrer le texte puis text-align doit être entre guillemets [style]="{width: '180px', 'text-align': 'center'}"
    Cela ne fonctionne pas bien avec [responsive]="true". Voir aussi forum.primefaces.org/...
    Nice, min-largeur de la fonctionnalité ne fonctionne pas. J'ai essayé "{'min-width':'300px'}"

    OriginalL'auteur David Pascoal

  2. 4

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

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

    Pour plus d'informations sur le Shadow DOM, veuillez vous référer https://blog.thoughtram.io/angular/2015/06/29/shadow-dom-strategies-in-angular2.html

    OriginalL'auteur Karan2020