primefaces datatable scroll 自定义css

最新推荐文章于 2023-03-06 14:19:42 发布

Aloria

最新推荐文章于 2023-03-06 14:19:42 发布

阅读量1.8k

点赞数

分类专栏： JSF 文章标签： primefaces css datatable scroll

本文链接：https://blog.csdn.net/yangpan1725/article/details/44101057

版权

本文介绍了如何在PrimeFaces的DataTable组件中自定义滚动条的CSS样式。通过在CSS文件中添加特定的选择器，并使用`!important`确保样式生效，解决了DataTable无法应用样式的问题。

摘要由CSDN通过智能技术生成

根据需求给dataTable 添加上scroll功能后，heaer box出现padding展示，为了去掉padding样式，需修改css文件。

在自己的css文件中加入如下代码：

.ui-datatable-scrollable-header-box{

padding-right:0px!important;
}

如果不加上！important，datatable不能应用该样式（具体请google it）

再在页面中加入如下代码

<span style="font-size:14px;">                         <p:dataTable id="appTableList" var="obj"
				value="#{cc.attrs.appData}"
 				rendered="#{cc.attrs.appData.size()>0}"
 				scrollable="#{cc.attrs.appData.size()>5?'true':'false'}" 
				 scrollHeight="#{cc.attrs.appData.size()>