CSS 如何将样式应用于 PrimeFaces 数据表？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19719614/
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
How to apply style to a PrimeFaces dataTable?
提问by Paladini
Initially, I've a JSF datatable 2.0 as follows:
最初，我有一个 JSF 数据表 2.0，如下所示：
<h:dataTable value="#{bean.items}" var="item" styleClass="table table-hover">
Which looks like this:
看起来像这样：
I wanted to use row selection, so I switched to PrimeFaces 4.0 datatable:
我想使用行选择，所以我切换到 PrimeFaces 4.0 数据表：
<p:dataTable value="#{bean.items}" var="item" styleClass="table table-hover"
rowKey="#{item.id}" selection="#{bean.selectedItem}" selectionMode="single">
Which looks like this:
看起来像这样：
However, my style classes tableand table-hoveraren't being applied. How is this caused and how can I solve it?
但是，我的样式类table并table-hover没有被应用。这是怎么引起的，我该如何解决？
回答by Kishor Prakash
Get the Primefaces User Guide of the version of your Primefaces here.
In that document you'll find how to override the styles of each component under Skinningheading.
For Example:
Following is the skinning for p:outputLabel
获取你的Primefaces的版本Primefaces用户指南这里。
在该文档中，您将找到如何在Skinning标题下覆盖每个组件的样式。
例如：
以下是蒙皮p:outputLabel
If you want to change color I'd use my css as which will apply for all p:outputLabels.
如果你想改变颜色，我会使用我的 css，因为它适用于所有的p:outputLabels。
.ui-outputlabel{
color:blue;
}
If you want to change style for only one particular p:outputLabelyou can use like this
如果您只想更改一个特定的样式，p:outputLabel您可以像这样使用
<div class="myLabel">
<p:outputLabel value="This is Demo" />
</div>
then the CSS would be like:
那么 CSS 会是这样的：
.myLabel .ui-outputlabel{
color:blue;
}
回答by Rokko_11
Hm... Isn't it the tableStyleClass- attribute, which must be table table-striped?
嗯...不是tableStyleClass- 属性，它必须是table table-striped？
You used only styleClass
你只用过 styleClass
回答by Yup
In primefaces basic style is controller by jquery. You can change the dataTable style changing the theme css style for dataTable. If you want to change style on the fly using jquery themeroller check this links- http://www.datatables.net/styling/themes
在primefaces 中，基本风格是jquery 的控制器。您可以更改 dataTable 样式，更改 dataTable 的主题 css 样式。如果您想使用 jquery themeroller 动态更改样式，请查看此链接 - http://www.datatables.net/styling/themes
Below are the responsible css segment for dataTable- change according to your need and add to your css file
下面是 dataTable 的负责 css 段-根据您的需要更改并添加到您的 css 文件中
.ui-datatable table{
border-collapse:collapse;width:100%;
}
.ui-datatable .ui-datatable-header,.ui-datatable .ui-datatable-footer{
text-align:center;padding:4px 10px;
}
.ui-datatable .ui-datatable-header{
border-bottom:0px none;
}
.ui-datatable .ui-datatable-footer{
border-top:0px none;
}
.ui-datatable thead th, .ui-datatable tfoot td{
text-align:center;
}
.ui-datatable thead th,.ui-datatable tbody td,.ui-datatable tfoot td{
padding:4px 10px;
overflow:hidden;
white-space:nowrap;
border-width:1px;
border-style:solid;
}
.ui-datatable tbody td{
border-color:inherit;
}
.ui-datatable .ui-sortable-column{
cursor:pointer;
}
.ui-datatable div.ui-dt-c{
position:relative;
}
.ui-datatable .ui-sortable-column-icon{
display:inline-block;
margin:-3px 0px -3px 2px;
}
.ui-datatable .ui-column-filter{
display:block;
width:100px;
margin:auto;
}
.ui-datatable .ui-expanded-row{
border-bottom:0px none;
}
.ui-datatable .ui-expanded-row-content{
border-top:0px none;
}
.ui-datatable .ui-row-toggler{
cursor:pointer;
}
.ui-datatable tr.ui-state-highlight{
cursor:pointer;
}
.ui-datatable .ui-selection-column .ui-chkbox-all{
display:block;
margin:0px auto;
width:16px;
height:16px;
}
.ui-datatable-scrollable table{
table-layout:fixed;
}
.ui-datatable-scrollable-body{
overflow:auto;
}
.ui-datatable-scrollable-header,.ui-datatable-scrollable-footer{
overflow:hidden;
border:0px none;
}
.ui-datatable-scrollable .ui-datatable-scrollable-header,.ui-datatable-scrollable .ui-datatable-scrollable-footer{
position:relative;
}
.ui-datatable-scrollable .ui-datatable-scrollable-header td{
font-weight:normal;
}
.ui-datatable-scrollable-body::-webkit-scrollbar{
-webkit-appearance:none;
width:15px;
background-color:transparent;
}
.ui-datatable-scrollable-body::-webkit-scrollbar-thumb{
border-radius:8px;
border:1px solid white;
background-color:rgba(194,194,194,.5);
}
.ui-datatable .ui-datatable-data tr.ui-state-hover{
border-color:inherit;
font-weight:inherit;
cursor:pointer;
}
.ui-datatable .ui-paginator,.ui-datatable .ui-paginator{
padding:2px;
}
.ui-column-dnd-top, ui-column-dnd-bottom{
display:none;
position:absolute;
}
.ui-column-dnd-top .ui-icon, ui-column-dnd-bottom .ui-icon{
position:absolute;
top:-4px;
}
/* InCell Editing */.ui-datatable .ui-cell-editor-input{
display:none;
}
.ui-datatable .ui-row-editing .ui-cell-editor .ui-cell-editor-output{
display:none;
}
.ui-datatable .ui-row-editing .ui-cell-editor .ui-cell-editor-input{
display:block;
}
.ui-datatable .ui-row-editor span{
cursor:pointer;
display:inline-block;
}
.ui-datatable .ui-row-editor .ui-icon-pencil{
display:inline-block;
}
.ui-datatable .ui-row-editing .ui-row-editor .ui-icon-pencil{
display:none;
}
.ui-datatable .ui-row-editor .ui-icon-check,.ui-datatable .ui-row-editor .ui-icon-close{
display:none;
}
.ui-datatable .ui-row-editing .ui-row-editor .ui-icon-check,.ui-datatable .ui-row-editing .ui-row-editor .ui-icon-close{
display:inline-block;
}
.ui-datatable .ui-datatable-data tr.ui-row-editing td.ui-editable-column,.ui-datatable .ui-datatable-data td.ui-cell-editing{
padding:0;margin:0;
}
/*resizer */.ui-datatable .ui-column-resizer{
width:8px;height:20px;
padding:0px;cursor:col-resize;
background-image:url("/ScraperOnWeb/javax.faces.resource/spacer/dot_clear.gif.jsf?ln=primefaces");
margin:-4px -10px -4px 0px;
float:right;
}
.ui-datatable .ui-filter-column .ui-column-resizer{
height:45px;
}
.ui-datatable .ui-column-resizer-helper{
width:1px;
position:absolute;
z-index:10;
display:none;
}
.ui-datatable-resizable{
padding-bottom:1px;/*fix for webkit overlow*/overflow:auto;
}
.ui-datatable-resizable table{
table-layout:fixed;
}
.ui-datatable-rtl{
direction:rtl;
}
.ui-datatable-rtl.ui-datatable thead th, .ui-datatable-rtl.ui-datatable tfoot td{
text-align:right;
}回答by webtechnelson
You can change styles according to the primefaces user's guide according to the prime faces version you're using. For example for the datatable, next picture tells you the class and which component applies to. you can check the user guide for the last versio 6.2 here
您可以根据您使用的主要面孔版本，根据主要面孔用户指南更改样式。例如对于数据表，下一张图片会告诉您类和适用于哪个组件。您可以在此处查看最新版本 6.2 的用户指南
https://www.primefaces.org/docs/guide/primefaces_user_guide_6_2.pdf
https://www.primefaces.org/docs/guide/primefaces_user_guide_6_2.pdf
I'm posting an example to illustrate how I modified the css for the datatable showcase from https://www.primefaces.org/showcase/ui/data/datatable/basic.xhtmland it worked great.
我发布了一个示例来说明我如何修改来自https://www.primefaces.org/showcase/ui/data/datatable/basic.xhtml 的数据表展示的 css并且效果很好。
body {
background-color: #221F4B;
}
.ui-datatable {
margin: 5% 8% 0 8%;
text-align: center;
}
.ui-datatable thead th {
color: #221F4B;
}
.ui-datatable tbody tr {
height: 5rem;
}
.ui-datatable-even {
background-color: #DFDFDF;
color: #221F4B;
}
.ui-datatable-odd {
background-color: #302C6C;
color: #A09FB2;
}
@media screen and (min-width: 769px) {
.ui-datatable {
margin: 5% 20% 0 20%;
}
}
I hope it helps somebody. Kind regards!
我希望它可以帮助某人。亲切的问候！
回答by skrk
I am using primefaces 6.0
我正在使用primefaces 6.0
there is option tableStyle in dataTable you can use everything you use in style eg:
在 dataTable 中有选项 tableStyle 您可以使用您在样式中使用的所有内容，例如：
tableStyle="font-family: sans-serif; border:none;font-size: small;padding:1px; background-color: #EAF7FC; background:#EAF7FC"
So the dataTable will look like this
所以数据表看起来像这样
<p:dataTable id="tbl" var="fmlist" value="#{testmb.fontList}"
paginatorTemplate="{CurrentPageReport} {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {Exporters}"
paginator="true" rows="25" style="margin-bottom:20px" scrollable="true" draggableRows="false" cellSeparator="true" scrollHeight="330"
tableStyle="font-family: sans-serif; border:none;font-size: small;padding:1px; background-color: #EAF7FC; background:#EAF7FC" >
