Question

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

我查看了其他stackoverflow，但发现这种方式是接受的答案。

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

是否有一种纯css方法可以使用纯css解决方案修改primeng数据表和其他组件的字体大小。

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

Answer 1

你可以用两种方式解决它。

启动数据表可以使用样式属性 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/#/datatable

底部部分样式标题。在这里，您可以获得数据表的样式元素。将您的自定义样式写入这些元素，它将适合您。

示例：

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

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

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

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

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

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

在angular2项目中更改primeng数据表中的font-size

3 个答案: