Aligning h:outputText inside a p:datatable

Question

I have an <h:outputText value="#{xx.nameame}" /> which is given below

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

I want to align the values coming for this field <h:outputText value="#{xx.nameame}" /> in left side of the cell example : text-align:left

But the problem is that JSF itself, considering the column as div tag, is assigning the the css by default which is:

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

Due to the above, the text is aligned center. If I change the above to text-align: to left , all the datatable will get changed in other screens too.
Hence I want to apply the change only to the above datatable and not for the others.

How can I achieve it?

Answer 1

For older PrimeFaces versions (pre 5.2), use this code to make it left align as.

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

For newer PrimeFaces versions, see the answer below where you can just put the style on the column

Answer 2

你也可以使用带有float选项的style属性;

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

Answer 3

In modern PrimeFaces versions (> 5.1) the div around the content is not rendered anymore, so the problem was solved in a different way (Because when you use Qadir Hussain answer, if the web page is in mobile view column value is shown below of the column name(expected at the opposite of the column name)).

The div around the content of the column 'content' is not present anymore in recent PrimeFaces versions so the following 'just works'

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

So you can give a style or a class or both to element, that will solves your responsive or more complicated issues.