0

これが私のacefaces datatable

<ace:dataTable id="tbl" value="#{mainSearch.searchResult}" var="srvc" 
            paginator="true" paginatorPosition="bottom" rows="10" 
            emptyMessage="No Record Present Yet" rowsPerPageTemplate="10,25,50,100" 
            rowIndexVar="row" rowStyleClass="#{row mod 2 eq 0?'none':'skyBlue'}">

    <ace:column headerText="Category" sortBy="#{srvc.groupName}" 
            filterBy="#{srvc.groupName}" filterMatchMode="contains">
        <h:outputText value="#{srvc.groupName}"/>
    </ace:column>

    <ace:column  headerText="Service Number" sortBy="#{srvc.serviceNumber}" 
            filterBy="#{srvc.serviceNumber}"filterMatchMode="contains">                            
        <h:outputText value="#{srvc.serviceNumber}"/>                       
    </ace:column>

    <ace:column headerText="Shift" sortBy="#{srvc.shift}" 
            filterBy="#{srvc.shift}" filterMatchMode="contains">
        <h:outputText value="#{srvc.shift}"/>
    </ace:column>
</ace:dataTable>

現在、このデータテーブルはページ全体に表示されています。高さを修正できます<ace:datatable height=..が、幅属性が見つかりませんでした。また、CSS を使用して幅を設定しようとしました (ヘッダーとデータテーブルの両方でスタイル属性を使用)。仕事。今、私はここで立ち往生しており、その幅を最小化するにはどうすればよいかを見つけることができません。

注:私にとって唯一の方法は、ヘッダー テキストを小さくすることでした。たとえば、最初の行のヘッダーがCategoryであるため、 CATだけで置き換えた場合、行全体が縮小されます。まず、絞る必要があることを意味します。テキスト（私の推測です）とにかく、このテキストを突っ込まずにそれはありますか？そうでない場合、このテキストのサイズを変更してこのデータテーブルを短くするにはどうすればよいですか?

4

1 に答える 1

0

ICEfaces ショーケースwidthの Firefox でCSS プロパティを変更してみましたが、必要な結果が得られました。テーブルを小さくしすぎてデータがテーブルに収まらなくなると、潜在的な問題が発生する可能性があることに注意してください。そのため、ブラウザーで結果のテーブルを調べて、適切な CSS フィクスチャを取得することをお勧めします。

のドキュメントに関しては、CSS スタイル クラスとインライン スタイルをそれぞれ設定するため<ace:dataTable>の典型的なstyleClassとプロパティがあるため、次のようにします。style

<ace:dataTable style="width:80%"> ... </ace:dataTable>

また

<ace:dataTable styleClass="my-width"> ... </ace:dataTable>

CSS クラスを使用:

.my-width {
    width:80%
}

補足として、最新の Primefaces を試す準備ができたら、適切な CSS スタイルを設定するために設計された多くの属性<p:dataTable>を見つけることができます。

于 2013-03-18T10:24:11.307 に答える