web-dev-qa-db-ja.com

データテーブル列のセルコンテンツを右揃え

OutputText値（つまり、以下のfee.TableAmount）を右揃えにし、その列のヘッダーを中央に配置したいと思います。これを実現するには、以下のoutputTextにどのパラメーターを渡す必要がありますか？

<h:dataTable>
    ...
    (other columns)
    ...
    <h:column headerClass="columnCenter">
        <f:facet id="header_agency" name="header">
            <h:outputText value="Amount"/>
        </f:facet>
        <h:outputText value="#{fee.tableAmount}">
            <f:convertNumber maxFractionDigits="2" groupingUsed="true"
                currencySymbol="$" type="currency" />
        </h:outputText>
    </h:column>
</h:dataTable>
cssjsfdatatable
12
Steve

<h:dataTable>のcolumnClasses属性を使用して、同じ列のすべてのセルにCSSクラスを指定できます。クラス名の区切り文字列を渡すことができます。

<h:dataTable columnClasses="column1,column2,column3">

上記は、最初の列に<td class="column1">をレンダリングし、2番目の列に<td class="column2">をレンダリングします。これにより、スタイルを外部化および正規化できます。

4つの列があり、1番目、2番目、4番目の列に特別なスタイルを設定する必要がなく、3番目の列のみを右揃えにする必要があるとします。

<h:dataTable columnClasses="none,none,right,none">

と組み合わせて

td.right {
    text-align: right;
}

これは、float: right;よりも意味的に正確で、技術的に堅牢です。

18
BalusC

あなたが言ったように、あなたがあなたのfloat: rightに直接<h:outputText>を定義するならば、このように：

<h:outputText style="float: right;" value="#{fee.tableAmount}"/>

次に、テキストを<span>にネストし、右に移動します。

残念ながら、<h:column>コンポーネントは、列自体のCSSクラスを指定する方法を提供していません。ただし、Richfaces <rich:column>など、テーブルに別のコンポーネントを使用している場合は、これを指定する別の解決策があります。まず、CSSクラスを設定します。

.textOnRight {
    text-align: right;
}

次に、このCSSクラスを列に割り当てます。

<rich:column styleClass="textOnRight" headerClass="columnCenter">
    <f:facet name="header">
        <h:outputText value="Amount"/>
    </f:facet>
    <h:outputText value="#{fee.tableAmount}">
        <f:convertNumber maxFractionDigits="2" groupingUsed="true"
            currencySymbol="$" type="currency" />
    </h:outputText>
</rich:column>

ちなみに、<f:facet>にidを設定しても、この属性はこのコンポーネントによって処理されないため、何も起こりません。

2
Romain Linsolas

知りたい人のためにstyle = "float：right"を追加しました。

<h:outputText style="float:right" value="#{fee.tableAmount}">
   ...
</h:outputText>
0
Steve