CSS 右对齐数据表列中的单元格内容
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5112151/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Right aligning cell content in a datatable column
提问by Steve
I want to right align an outputText value (ie. fee.TableAmount below) and I want to keep the header for that column centered. What parameter do I have to pass to outputText below to achieve this?
我想右对齐 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>
回答by BalusC
You can use the columnClassesattribute of <h:dataTable>to specify CSS classes on all cells of the same column. You can pass a commaseparated string of class names.
您可以使用columnClassesof 属性<h:dataTable>在同一列的所有单元格上指定 CSS 类。您可以传递以逗号分隔的类名字符串。
<h:dataTable columnClasses="column1,column2,column3">
The above renders <td class="column1">for the first column, <td class="column2">for the second and so on. This allows you to externalize and normalize the styles.
以上<td class="column1">为第一列呈现，第二列<td class="column2">以此类推。这允许您外部化和规范化样式。
Imagine that you have 4 columns and the first, second and fourth column doesn't need to have a special style and that only the third column needs to be right-aligned, then do so
想象一下你有4列，第一、二、四列不需要特殊样式，只有第三列需要右对齐，然后这样做
<h:dataTable columnClasses="none,none,right,none">
in combination with
结合
td.right {
text-align: right;
}
which is semantically more correct and technically more robust than a float: right;.
这在语义上比 a 更正确，技术上更健壮float: right;。
回答by Romain Linsolas
As you said, if you define a float: rightdirectly on your <h:outputText>, like this:
正如您所说，如果您float: right直接在您的 上定义 a <h:outputText>，如下所示：
<h:outputText style="float: right;" value="#{fee.tableAmount}"/>
then it will nest your text in a <span>that will then be moved to the right.
然后它将您的文本嵌套在 a 中<span>，然后将其移至右侧。
Unfortunately, the <h:column>component does not provide a way to specify the CSS class of the column itself. However, in case you are using another component for your table, such as the Richfaces <rich:column>, there is another solution is to specify this: first, set a CSS class:
不幸的是，该<h:column>组件没有提供一种方法来指定列本身的 CSS 类。但是，如果您为表格使用另一个组件，例如 Richfaces <rich:column>，则有另一种解决方案是指定此：首先，设置一个 CSS 类：
.textOnRight {
text-align: right;
}
Then, assign this CSS class to your column:
然后，将此 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>
By the way, setting an idin your <f:facet>does nothing, as this attribute is not handled by this component.
顺便说一句，id在您的设置中设置 an<f:facet>没有任何作用，因为该属性不由该组件处理。
回答by Steve
I just added style="float:right" for anyone else wanting to know.
我只是为其他想知道的人添加了 style="float:right" 。
<h:outputText style="float:right" value="#{fee.tableAmount}">
...
</h:outputText>
