Estoy tratando de ajustar el tamaño de fuente de los encabezados de columna y también puede ser el contenido. Traté de hacer una solución css pura basada en las clases estructurales mencionadas por Primeng aquí, pero fue en vano. https://www.primefaces.org/primeng/#/datatable https://www.primefaces.org/primeng/#/theming
Miré otro stackoverflow pero encontré que esta era la respuesta aceptada.
<p-column field="type" header="Type" [style]="{'text-align': 'center', 'font-size': '0.8em'}"></p-column>¿Existe una forma CSS pura de modificar el tamaño de fuente de las tablas de datos primeng y otros componentes utilizando soluciones CSS puras?
Vale la pena mencionar que no soy realmente una persona de UI/UX. Así que si alguien ya ha solucionado esto se lo agradecería. Muchas gracias.
Puedes resolverlo de dos maneras.
Priming Datatable se puede diseñar usando el atributo de estilo styleClass o tableStyleClass
Ejemplo:
<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>Puede dar la clase de estilo respectiva a estos atributos.
La segunda forma de editar el estilo es consultar https://www.primefaces.org/primeng/showcase/#/table
El encabezado de estilo de la parte inferior. Aquí puede obtener los elementos de estilo de la tabla de datos. Escriba su estilo personalizado en esos elementos y funcionará para usted.
Ejemplo:
.ui-datatable-header{ text-align:center; font-size:20px; }Espero que estos dos te ayuden a solucionar el problema.
La tabla de datos PrimeNG es básicamente una tabla HTML, por lo que puede cambiarla simplemente usando td y th para cambiar font-size de las celdas, los encabezados o ambos.
th, td { text-align: center; font-size: 0.8em; } Sin embargo, si desea cambiar fácilmente los estilos a través de CSS para toda la tabla, puede usar la propiedad tableStyleClass y simplemente crear una nueva clase para la tabla como esta:
<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>Y agregue el estilo a la clase:
.prime-table{ text-align: center; font-size: 0.8em; }Puede usar el siguiente código para satisfacer sus necesidades
.ui-table, .ui-table .ui-table-wrapper table { font-size: 16px !important; } ui-table y ui-table-wrapper son clases css definidas en la última versión de tablas de PrimeNG