PrimeNg Änderung p-Spalte Breite

Question

Ich bin in einem Projekt, wo ich PrimeNg verwenden muss, um Tabellen zu tun, und ich habe ein Problem mit der Breite der ersten Spalte definieren.

In meinem HTML-Code, ich habe so etwas wie:

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

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

Und in meinem CSS, ich habe etwas:

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

auch mit folgenden HTML versucht:

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

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

Und in meinem CSS:

td.col1 { 
    width: 300px; 
} 

Und ich habe auch den Code überprüfen und sah die Klasse der Reihe, die tr.ui-Widget-Inhalte ui-Datatable-even ist und versucht, die CSS ..

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

Und nichts scheint zu funktionieren . Jeder kann mir sagen, ob es möglich ist, die Breite der Spalte zu definieren, und wenn ja, wie kann ich das tun?

Danke für alle Antworten ...

Answer 1

Sie die Breite manuell definieren können, versuchen Sie dies:

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

Answer 2

Wenn Sie mit Winkel arbeiten, können Sie CSS-Datei aktualisieren PrimeNg Styling ändern mit folgenden Beispielcode,

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

Informationen Schatten im DOM finden Sie https://blog.thoughtram.io/angular/2015/06/29/shadow-dom-strategies-in-angular2.html