在angular2项目中更改primeng数据表中的字体大小

Posted 2023-03-06

【中文标题】在angular2项目中更改primeng数据表中的字体大小

【英文标题】：Change font-size in primeng datatables in angular2 project

【发布时间】：2017-09-23 11:40:00

【问题描述】：

我正在尝试调整列标题的字体大小，也可能是内容。我尝试根据Primeng here提到的结构类做一个纯css解决方案，但无济于事。 https://www.primefaces.org/primeng/#/datatable https://www.primefaces.org/primeng/#/theming

我查看了其他 ***，但发现这种方式是公认的答案。

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

有没有一种纯 css 的方式来使用纯 css 解决方案来修改primeng 数据表和其他组件的字体大小。

值得一提的是，我并不是真正的 UI/UX 人。因此，如果有人已经解决了这个问题，我将不胜感激。非常感谢。

【参考方案1】：

你可以通过两种方式解决它。

Priming Datatable 可以使用样式属性 styleClass 或 tableStyleClass

设置样式

例子：

<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> 

您可以为该属性赋予相应的样式类。

第二种编辑样式请参考https://www.primefaces.org/primeng/showcase/#/table

底部样式标题。在这里您可以获取数据表的样式元素。将您的自定义样式写入这些元素，它会为您工作。

例子：

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

希望这两个能帮助您解决问题。

【参考方案2】：

您可以使用以下代码以满足您的需求

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

ui-table和ui-table-wrapper是PrimeNG最新版表中定义的css类

【参考方案3】：

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;
    

【讨论】：

我试过你的解决方案，两个解决方案都不起作用，一个和 tableStyleClass 一样。 tableStyleClass 是它们用于设置表格样式的属性之一。理想情况下，您的解决方案应该有效。但不知何故，它对我不起作用。如果它对其他人有用，那么这应该是公认的答案。

这就是我正在做的事情，但我也没有包含任何 PrimeUI 主题并自己设置了所有元素的样式。也许它会被您的 CSS 中的某些内容覆盖。您可以尝试使用!important 规则来查看是这种情况还是其他原因。

我觉得你需要/deep/。