css - 右对齐数据表列中的单元格内容

Question

我想右对齐一个 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>

Answer 1

您可以使用 columnClasses <h:dataTable> 的属性在同一列的所有单元格上指定 CSS 类。您可以传递以逗号分隔的类名字符串。

<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; 更正确，技术上更稳健。 .