<h:dataTable> 设置样式：宽度，背景色

 

 

组件<h:dataTable>中提供了rowClasses和columnClasses等。

          rowClasses 用来控制行的显示,，如果你在rowClasses中加入两个样式类，并使用逗号分开，那么渲染的每一行会交替使用这两个样式类进行显示，同理多个样式类也会循环交替显示。

          columnClasses用来控制每列的显示，用法同rowClasses。

< h:dataTable  value ="#{userSubsysFroCentHistoryAction.froCentList}"  

                            var ="oneCentList"  

                            styleClass ="mxl"  

                            rowClasses ="list-row1-background ,list-row2-background"  

                           columnClasses ="list-column1-center,list-column2-center,list-column3-center,

                                                            list-column4-center,list-column5-center,list-column6-center" >
      < h:column >
       < f:facet  name ="header" >
        < h:outputText  value ="时间"   />
       </ f:facet >
        < h:outputText  value ="#{oneCentList[0]}"   />
      </ h:column >
      < h:column >
        < f:facet  name ="header" >
         < h:outputText  value ="平台" />
        </ f:facet >
        < h:outputText  value ="#{oneCentList[1]}" />
      </ h:column >
      < h:column >
       < f:facet  name ="header" >
        < h:outputText  value ="得分" />
       </ f:facet >
       < h:outputText  value ="#{oneCentList[2]}"  rendered ="#{oneCentList[2]>=0}" />
      </ h:column >
      < h:column >
        < f:facet  name ="header" >
         < h:outputText  value ="扣分" />
        </ f:facet >
        < h:outputText  value ="#{oneCentList[2]}"  rendered ="#{oneCentList[2]<0}" />
      </ h:column >
      < h:column >
       < f:facet  name ="header" >
        < h:outputText  value ="剩余积分" />
       </ f:facet >
       < h:outputText  value ="#{oneCentList[3]}"   />
      </ h:column >
      < h:column >
       < f:facet  name ="header" >
        < h:outputText  value ="备注" />
       </ f:facet >
       < h:outputText  value ="#{oneCentList[4]}"   />
      </ h:column >
  </ h:dataTable >  

 其中Stype.css 中的样式定义如下：

    .mxl{width:674px;margin:0 auto;text-align:center;}   // 定义表格整体样式：宽度

   //  以下定义每列的样式

.list-column1-center {
  text-align: center;
  width: 21%;
}
.list-column2-center {
  text-align: center;
  width: 13%;
}
.list-column3-center {
  text-align: center;
  width: 12%;
}
.list-column4-center {
  text-align: center;
  width: 12%;
}
.list-column5-center {
  text-align: center;
  width: 12%;
}
.list-column6-center {
  text-align: center;
  width: 30%;
}

//  以下定义每行的样式
.list-row1-background{
  background:#FFFFFF;
}
.list-row2-background{
  background:#F1F1F1;
}

结果如图：

 

 

转 ：jsf 的<t:dataTable>组件自定义控制指定行样式的方法 

          http://blog.youkuaiyun.com/icess_ma/archive/2007/10/24/1840957.aspx