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

我想调整列标题的字体大小，也可能是内容。我试图根据Primeng提到的结构类来做一个纯粹的css解决方案，但无济于事。 https://www.primefaces.org/primeng/#/datatable https://www.primefaces.org/primeng/#/theming 更改angular2项目primeng数据表中的字体大小

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

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

有一个纯CSS的方法来修改使用纯CSS解决方案primeng数据表和其他组件的字体大小。

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

来源

2017-04-26 codestruggle

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

来源

2017-04-26 08:00:33 DGarvanski

的表的最新版本，我想你的解决方案定义的CSS类，这两个方案都没有工作，第一个以及tableStyleClass之一。 tableStyleClass是用于样式表的属性之一。理想情况下，您的解决方案应该可以工但不知何故，它不工作的我。如果它为别人工作，那么这应该是被接受的答案。 – codestruggle

这就是我正在做的，但我也没有包含任何PrimeUI主题，并且自己设计了所有元素。也许它会被你CSS中的东西覆盖。你可以尝试使用'！important'规则来判断是否是这种情况，或者是其他情况。 – DGarvanski

我想你需要'/ deep /'。 – 2017-04-26 13:16:24

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

引发的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/#/datatable

的底部造型头。在这里你可以得到数据表的样式元素。将您的自定义样式写入这些元素，它将为您工作。

例子：

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

希望这两个会帮助你的问题排序。

来源

2017-04-26 10:47:20

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

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

ui-table，并ui-table-wrapper在PrimeNG

来源

2018-02-13 18:41:39

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

回答

相关问题