To work around this I’ve found that declaring a <div/> within the header facet allows you to override the style to behave as desired… below is an example of a table that uses a default headerClass for the majority of columns but is overridden to left align where applicable.

Code:

<h:panelGrid width=”100%” id=”memberTransactionTableBody” border=”0″ cellspacing=”0″ cellpadding=”0″ columns=”1″>
<h:column>
<h:form id=”form”>

<h:dataTable rowClasses=”accountTransactionRowDefault, accountTransactionRowAlternate”
headerClass=”accountColumnHeader StrongText”
footerClass=”accountColumnFooter”
width=”100%”
cellpadding=”0″ cellspacing=”0″ border=”0″ columnClasses=”account-padding,account-date,account-description,account-debit,

account-credit,account-currency,account-status”
styleClass=”accountTransactionText”
var=”transaction”
value=”#{transactionHandler.transactionBean.transactionHistory}”
rows=”40″>

<h:column> </h:column>

<h:column>
<f:facet name=”header”>
<div style=”float: left;”>
#{messages['message.account.column.date']}
</div>
</f:facet>
<h:outputText value=”#{transaction.dateTimeStamp}”/>
<f:facet name=”footer”> </f:facet>
</h:column>

<h:column>
<f:facet name=”header”>
<div style=”float: left;”>
#{messages['message.account.column.description']}
</div>
</f:facet>
<h:outputText value=”#{transaction.description}”/>
</h:column>

<h:column>
<f:facet name=”header”>
#{messages['message.account.column.debit']}
</f:facet>
<h:outputText value=”#{transaction.debit}”/>
</h:column>

<h:column>
<f:facet name=”header”>
#{messages['message.account.column.credit']}
</f:facet>
<h:outputText value=”#{transaction.credit}”/>
</h:column>

<h:column>
<f:facet name=”header”>
#{messages['message.account.column.currency']}
</f:facet>
<h:outputText value=”#{transaction.currency}”/>
</h:column>

</h:dataTable>

</h:form>
</h:column>
</h:panelGrid>