1

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;
  }

firebugに示す内部構造

    <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>
4

2 に答える 2

1

さまざまな PrimeFaces 機能が列幅 (スクロール可能) を知る必要がある/知りたいので、PrimeFaces 3.4 では次のように幅を指定する必要があります。

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

単位はピクセルです。

于 2012-10-01T23:31:37.847 に答える
-1

以下のようなことをしてください

テーブル：

<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を作成します（左右の値が正しいことを確認してください）

于 2012-10-02T06:10:52.530 に答える