CSS PrimeFaces 数据表滚动条
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16083687/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
PrimeFaces datatable Scrollbar
提问by Holysh
I have a form with a primefaces datatable which i have set the columns width in css for it :
我有一个带有 primefaces 数据表的表单，我已经在 css 中为它设置了列宽：
.idcol{width: 5%}
.prioritycol{width: 5%}
.titlecol{width: 30%}
.descriptioncol{width: 40%}
.actionscol{width: 10px}
Everything is okay but when i add the scrollable="true"attribute in order to have a scrollable datatable, the result is worst :
一切都很好，但是当我添加scrollable="true"属性以获得可滚动的数据表时，结果是最糟糕的：
This is the declaration of the datatable :
这是数据表的声明：
<p:dataTable id="dtable" var="todos" value="#{todo.todoList}" scrollable="true"
resizableColumns="false" scrollHeight="300" lazy="true"
styleClass="idcol,prioritycol,titlecol,descriptioncol,actionscol">
What is the problem? Thank you!
问题是什么？谢谢！
采纳答案by Holysh
I found the solution, You have to edit you css and you JSF code at the same time and looking what you have as result, For my problem i edited my css and the jsf code step by step, here is the code that worked for me :
我找到了解决方案，您必须同时编辑 css 和 JSF 代码并查看结果，对于我的问题，我逐步编辑了 css 和 jsf 代码，这是对我有用的代码：
CSS :
CSS :
.idcol{width: 5%}
.prioritycol{width: 5%}
.titlecol{width: 30%}
.descriptioncol{width: 40%}
.actionscol{width: 20%}
The Form :
表格 ：
- Column 1 : width="25"
- Column 2 : width="55"
- Column 3 : width="369"
- Column 4 : width="469"
- Column 5 : width="170"
- 第 1 列：宽度 =“25”
- 第 2 列：宽度 =“55”
- 第 3 列：宽度 =“369”
- 第 4 列：宽度 =“469”
- 第 5 列：宽度 =“170”
回答by KCP
You can set the column width this way
您可以通过这种方式设置列宽
<p:column headerText="Type" width="70%">
or you can specify style class this way
或者您可以通过这种方式指定样式类
<p:column headerText="Type" styleClass="idcol" >
You can add scrollWidth some thing like this
你可以像这样添加 scrollWidth
<p:dataTable var="data" rowKey="#{data.key}" style="width:70%"
sortOrder="ascending"
selection=""
value=""
selectionMode="single"
scrollable="true"
scrollWidth="71%"
scrollHeight="3%"
>
<p:ajax event="rowSelect" listener=""
update="" />
<p:column headerText="Type" styleClass="" sortBy="" width="70%">
<h:outputText id="dataTYpe" value="" />
</p:column>
<p:column headerText="Category" sortBy="" width="30%">
<h:outputText value="" />
</p:column>
</p:dataTable>
