Change font size in source data in angular2 project

Question

I am trying to adjust the font size of the column headings and may be content as well. I tried to make a clean css solution based on the structural classes mentioned by Primeng here, but to no avail. https://www.primefaces.org/primeng/#/datatable https://www.primefaces.org/primeng/#/theming

I looked at another stackoverflow, but found this to be an acceptable answer.

<p-column field="type" header="Type"
        [style]="{'text-align': 'center', 'font-size': '0.8em'}"></p-column>

Is there a clean CSS way to change the font size of primeng datatables and other components using pure css solutions.

It is worth mentioning that I am not really a UI / UX user. Therefore, if someone had already decided this, I would be grateful. Many thanks.

Answer 1

You can solve this in two ways.

Priming Datatable can be styled using the style styleClass or tableStyleClass attribute.

Example:

<p-dataTable [value]="cars" tableStyleClass="prime-table">
    <p-column field="vin" header="Vin" styleClass="pr-column1"></p-column>
    <p-column field="year" header="Year" styleClass="pr-column2"></p-column>
    <p-column field="brand" header="Brand" styleClass="pr-column3"></p-column>
    <p-column field="color" header="Color" styleClass="pr-column4"></p-column>. 
</p-dataTable> 

You can assign the appropriate style class to these attributes.

The second way to edit the style: https://www.primefaces.org/primeng/#/datatable

The bottom of the styling header. Here you can get stylistic elements in datatable format. Write your own personal style for these elements and it will work for you.

Example:

.ui-datatable-header{
  text-align:center;
  font-size:20px;
} 

We hope that these two will help you solve the problem.

Answer 2

PrimeNG HTML, , td th, font-size , .

th, td {
  text-align: center;
  font-size: 0.8em;
}

, CSS , tableStyleClass :

<p-dataTable [value]="cars" tableStyleClass="prime-table">
    <p-column field="vin" header="Vin"></p-column>
    <p-column field="year" header="Year"></p-column>
    <p-column field="brand" header="Brand"></p-column>
    <p-column field="color" header="Color"></p-column>
</p-dataTable>

:

 .prime-table{
      text-align: center;
      font-size: 0.8em;
    }

Answer 3

You can use the following code to suit your needs.

.ui-table,
.ui-table .ui-table-wrapper table {
  font-size: 16px !important;
}

ui-table, and ui-table-wrapper- css classes defined in the latest version of PrimeNG tables