derecho alinear contenido de la celda en una columna de tabla de datos

Question

Quiero alinear a la derecha un valor outputText (es decir. Fee.TableAmount a continuación) y que quieren mantener la cabecera para esa columna centrada. ¿Qué parámetro tengo que pasar a outputText a continuación para lograr esto?

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

Answer 1

Puede usar el atributo columnClasses de <h:dataTable> para especificar clases de CSS en todas las celdas de la misma columna. Puede pasar una cadena separada por comas de nombres de clase.

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

Lo anterior renders <td class="column1"> para la primera columna, <td class="column2"> para la segunda y así sucesivamente. Esto le permite externalizar y normalizar los estilos.

Imagine que tiene 4 columnas y la primera, segunda y cuarta columna no necesita tener un estilo especial y que sólo la tercera columna debe estar alineado a la derecha, y luego hacerlo

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

en combinación con

td.right { 
    text-align: right; 
} 

que es semánticamente más correcta y técnicamente más robusto que un float: right;.

Answer 2

Acabo de añadir style = "float: right" para cualquier otra persona que quiera saber.

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

Answer 3

Como usted ha dicho, si se define un float: right directamente en su <h:outputText>, así:

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

entonces se hará nido su texto en un <span> que luego se mueve hacia la derecha.

Desafortunadamente, el componente <h:column> no proporciona una forma de especificar la clase CSS de la propia columna. Sin embargo, en caso de que esté utilizando otro componente para su mesa, tales como los RichFaces <rich:column>, no hay otra solución es especificar lo siguiente: en primer lugar, establece una clase CSS:

.textOnRight { 
    text-align: right; 
} 

A continuación, asigne esta clase CSS a la columna:

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

por cierto, el establecimiento de un id en su <f:facet> no hace nada, ya que este atributo no está a cargo de este componente.