primefaces datatable scroll 自定义css

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

Aloria

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

阅读量1.9k

点赞数

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

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

版权

JSF 专栏收录该内容

2 篇文章

订阅专栏

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

根据需求给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()>=5?150:30*cc.attrs.appData.size()}" 
				 styleClass="ui-datatable-scrollable-header-box"></span>

scrollable与scrollHeight两个属性是对scroll属性的设置，此处这样写是为了设置datatable中数据行数大于5行再显示scroll功能，否则不显示，并且scrollHeight也是根据行数来设置