Правое выравнивание содержимого ячейки в столбце данных

Я хочу правильно выровнять значение 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>

Ответ 1

Вы можете использовать атрибут columnClasses <h:dataTable>, чтобы указать классы CSS во всех ячейках того же столбца. Вы можете передать commaseparated строку имен классов.

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

Вышеупомянутый означает <td class="column1"> для первого столбца, <td class="column2"> для второго и т.д. Это позволяет экрнализировать и нормализовать стили.

Представьте, что у вас есть 4 столбца, а первый, второй и четвертый столбцы не должны иметь специальный стиль и что только третий столбец должен быть выровнен по правому краю, а затем сделать это

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

в сочетании с

td.right {
    text-align: right;
}

который семантически более корректен и технически более устойчив, чем float: right;.

Ответ 2

Как вы сказали, если вы определяете 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>

Кстати, установка id в вашем <f:facet> ничего не делает, поскольку этот атрибут не обрабатывается этим компонентом.

Ответ 3

Я просто добавил style = "float: right" для всех, кто хочет знать.

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