primefaces数据表的固定列宽

Question

我正在尝试为primefaces数据表定义固定列宽。显然，设置宽度不起作用，因此创建了一个CSS文件，但这也无效。任何提示或解决方案将非常感激。谢谢！

<p:dataTable id="messagesTableId" emptyMessage="#{messageBundle.tableNoResultsFound}"
             value="#{messageSearchBean.lazyModel}" var="message"    
             styleClass="messageOccurenceResult-table">

    <f:facet name="header">
        <h:outputText value="#{messageBundle['global.search.results']}"/>
    </f:facet>

    <p:column headerText="#{messageBundle['message.send.date']}" 
      styleClass="messageOccurenceResult-table" >
         <h:outputText value="#{message.sendDate}"/>   
    </p:column>       

    <p:column headerText="#{messageBundle['message.cc.email']}" style="width:*;
              word-wrap:break-word;">
        <h:outputText value="#{message.ccEmailIds}" />
    </p:column>

    <p:column headerText="#{messageBundle['message.messages.sent']}" 
      style="word-wrap:break-word;">
        <h:outputText value="#{fn:length(message.messageOccurrence)}"/>
    </p:column>

 </p:dataTable>

CSS文件位于

之下

 .messageOccurenceResult-table td:nth-child(1) {
  width:75px !important;
  }

 .messageOccurenceResult-table td:nth-child(2) {
  width:125px !important;
  }

 .messageOccurenceResult-table td:nth-child(3){
  width:75px !important;
  }

内部结构如萤火虫所示

    <table role="grid">
    <thead>
    <tr>
    <tr>
    <tr role="row">
    <th id="messageDisplayForm:messagesTableId:j_idt86" 
    class="ui-state-default ui-  sortable-column ui-state-active" style="width:10%;"  
     role="columnheader">
    <div class="ui-dt-c">
    <span class="ui-sortable-column-icon ui-icon ui-icon-carat-2-n-s ui-icon-triangle-1-
    s"></span>
    <span>Date Sent</span>
    </div>
    </th>
    <th id="messageDisplayForm:messagesTableId:j_idt88"
     class="ui-state-default ui-sortable-column" style="width:10%;" role="columnheader">
    <div class="ui-dt-c">
    <span class="ui-sortable-column-icon ui-icon ui-icon-carat-2-n-s"></span>
   <span>Subject</span>
   </div>
   </th>
    <th id="messageDisplayForm:messagesTableId:j_idt90" class="ui-state-default" 
    style="width:20%;" role="columnheader">
   <div class="ui-dt-c">
    <span>Message Category</span>
    </div>
   </th>
   <th id="messageDisplayForm:messagesTableId:j_idt92" class="ui-state-default ui-sortable-    column" style="word-wrap:break-word;" role="columnheader">
    <div class="ui-dt-c">
   <span class="ui-sortable-column-icon ui-icon ui-icon-carat-2-n-s"></span>
   <span>Sender Email</span>
   </div>
   </th>
   <th id="messageDisplayForm:messagesTableId:j_idt98" 
    class="ui-state-default"   style="width:50px;" role="columnheader">
    <div class="ui-dt-c">
    <span>Messages Sent</span>
    </div>
    </th>
    </tr>
    </thead>
    <tfoot>
    <tbody id="messageDisplayForm:messagesTableId_data" 
    class="ui-datatable-data ui-widget-content">
    </table>

Answer 1

各种PrimeFaces功能需要/想知道列宽（可滚动），因此对于PrimeFaces 3.4，您需要指定宽度，如下所示：

<p:column ... width="52">
  ...
</p:column>

单位为像素。

Answer 2

执行以下操作

表格

<p:datatable tableStyleClass="ui-datatable-tst1"  styleClass="mystyle" ....>

css tableStyleClass：

.ui-datatable .ui-datatable-tst1 {
background-color: black;
background-image: inherit;
background-position: 0 0;
background-attachment: scroll;
background-repeat: repeat;
color: black;
padding-top: 0px;
padding-bottom: 0px;
left:0px;
width:70%!important;
height:350px;
position: absolute;
}

css styleClass：（参考：http://forum.primefaces.org/viewtopic.php?f=9&t=22443）

 .mystyle.ui-datatable .ui-datatable-header{
    height: 20px !important;
    width: 100%;
    position: absolute;
    margin-top: -10px;
    padding-top: 0px;
    padding-bottom: 0px;
    }

    .mystyle.ui-datatable .ui-datatable-data{
    height: 70% !important;
    width: 100%;
    position: absolute;
    top:70px;
    margin-top: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
    margin-right: 0px;
    padding-top: 0px;
    padding-bottom: 0px;
    }

    .mystyle.ui-datatable .ui-datatable-odd.ui-state-hover{
    background:  blue;

    }

    .mystyle.ui-datatable .ui-datatable-even.ui-state-hover{
    background: cadetblue ;

    }

    .mystyle.ui-datatable .ui-datatable-even.ui-state-highlight{
    background: cadetblue ;

    }

    .mystyle.ui-datatable .ui-datatable-odd.ui-state-highlight{
    background: blue;

    }

    .mystyle.ui-datatable .ui-datatable-data-empty td {
    color:red;
    font-weight:bold;
    }
    .mystyle.ui-datatable th { 
    font-family: verdana;
    font-size: 1em;
    margin-top: 0px;
    }

    .mystyle.ui-datatable .ui-expanded-row-content{
    background:white;
    }

    .mystyle.ui-datatable .ui-datatable-data tr{
    height : 24px;
    margin-top: 0px;
    margin-bottom: 10px!important;
    margin-left: 0px;
    margin-right: 0px;
    padding-top: 0px;
    padding-bottom: 10px!important;
    left: 0px;
    right: auto;
    top: 0px;
    bottom: auto;
   }

专栏：

 <p:column headerText="tst" styleClass="ui-column1-size">

<强>的CSS：

.ui-datatable .ui-column1-size{
width:15%;
height: 8%;
font-size: 90%;
left:0%;
right:15%;
position:absolute;
}

为所有列创建上面的css（确保左侧和右侧值正确）