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

Posted 2023-02-22

【中文标题】右对齐数据表列中的单元格内容

【英文标题】：Right aligning cell content in a datatable column

【发布时间】：2011-07-03 23:39:38

【问题描述】：

我想右对齐 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】：

您可以使用<h:dataTable> 的columnClasses 属性在同一列的所有单元格上指定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; 更正确，技术上更健壮。

【讨论】：

是的，但奇怪的是<thead><th>...</th></thead> 表头似乎只能指定类in <h:column headerClass="..."> instead。所以：列 data 的 CSS 类来自 <h:dataTable columnClasses="..., ..., ..."/>，如上所述，列 headers 的 CSS 来自每个 <h:column headerClass="...">。

@Arjan：<h:dataTable> 也有一个headerClass 属性。另请参阅前面链接的标签文档的“渲染标题”部分。

是的，但这适用于所有列标题，并且不是特定列的特定类的逗号分隔列表，is it?

啊，是的，我现在明白你的意思了。是的，必须在<h:column> 的headerClass 属性中指定各个列标题。如果有<h:dataTable headerClasses> 和/或<h:column styleClass>，这将是有意义的。好吧，考虑向 JSF 规范人员发布增强请求。

【参考方案2】：

如你所说，如果你直接在你的<h:outputText> 上定义一个float: right，像这样：

<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 没有任何作用，因为这个属性不是由这个组件处理的。

【参考方案3】：

我刚刚为其他想知道的人添加了 style="float:right"。

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