在 p:datatable 中对齐 h:outputText答案

【问题标题】：Aligning h:outputText inside a p:datatable在 p:datatable 中对齐 h:outputText
【发布时间】：2014-01-17 08:18:36
【问题描述】：

我有一个<h:outputText value="#{xx.nameame}" />，如下所示

<p:dataTable>
  <p:column width="200"  >
    <f:facet name="header"    >
      <h:outputText value="Header1" />
    </f:facet>
    <h:panelGroup rendered="#{xx.addFlag == false}">
      <h:outputText value="#{xx.nameame}" />
    </h:panelGroup>
  </p:column>
</p:dataTable>

我想在单元格示例的左侧对齐此字段 <h:outputText value="#{xx.nameame}" /> 的值：text-align:left

但问题在于 JSF 本身，将列视为 div 标签，默认情况下分配 css：

.ui-dt-c {
     white-space: normal;
     text-align: center;
}

由于上述原因，文本居中对齐。如果我将上面的内容更改为text-align: to left，所有数据表也会在其他屏幕上发生更改。
因此我只想将更改应用于上述数据表，而不应用于其他数据表。

我怎样才能实现它？

【问题讨论】：

这个渲染的 html 是什么？
'JSF' 没有将列视为 div，它是 PrimeFaces在旧版本中在内容周围呈现 div。列单元格仍然是<td>。因此，在最近的 PF 版本中，高度赞成的答案不再相关，您可以“只”在列上添加样式（类）。在这种情况下，更具体的选择器也有助于将其应用于一个数据表......所有基本的 css

标签： css jsf primefaces

【解决方案1】：

对于旧的 PrimeFaces 版本（5.2 之前），使用此代码使其左对齐。

<div align="left"><h:outputText value="#{xx.nameame}" /></div>

对于较新的 PrimeFaces 版本，请参阅the answer below，您可以在其中将样式放在列上

【讨论】：

谢谢，它对我有用！我正在使用而不是
。它也有效。
这个答案不好（尽管它有效）。更具体的选择器也可以将其应用于一个数据表

【解决方案2】：

您也可以将style 属性与float 选项一起使用；

<h:outputLabel value="Max" style="float:left" />

【讨论】：

是的，但是例如style="text-align:center" 不起作用，因为 outputLabel 呈现的是跨度，而不是 div。把tyle="text-align: left"放在专栏上会更好

【解决方案3】：

在现代 PrimeFaces 版本（> 5.1）中，内容周围的 div 不再呈现，因此问题以不同的方式解决（因为当您使用 Qadir Hussain 答案时，如果网页在移动视图中，则列值为如下所示的列名（预计在列名的对面））。

在最近的 PrimeFaces 版本中，“内容”列内容周围的 div 不再存在，因此以下“正常工作”

<p:column style="text-align: left" class="TexLeft">
......
....
</p:column>

因此，您可以为元素指定样式或类或两者兼而有之，这将解决您的响应式或更复杂的问题。

【讨论】：