web-dev-qa-db-ja.com

p列の幅を変更する

PrimeNGを使用してテーブルを作成する必要があるプロジェクトに参加していますが、最初の列の幅の定義に問題があります。

私のHTMLコードには、次のようなものがあります。

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

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

そして私のCSSには、次のようなものがあります。

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

また、私は次のHTMLを試しました。

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

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

そして私のCSSで：

td.col1 {
    width: 300px;
}

また、コードを調べて、tr.ui-widget-content ui-datatable-evenである行のクラスを確認し、次のCSSを試しました。

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

そして、何もうまくいかないようです。

列の幅を定義することが可能かどうかを誰かに教えてもらえますか？

csswidthprimeng
11
Daniel Serrão

幅を手動で定義できます。これを試してください：

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

アンギュラーを使用している場合、cssファイルを更新して、次のサンプルコードでPrimeNgスタイルを変更できます。

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

Shadow DOMの詳細については、 https://blog.thoughtram.io/angular/2015/06/29/shadow-dom-strategies-in-angular2.html を参照してください。

4
Karan2020