change text alignment in datatable

[jhs2zz]

Hi, I have tried many ways to change the text alignment in a datatable. Specifically I want the header for each column to be left aligned, and I want text in each data row to be vertically top aligned. I have tried specifying "rowClasses", "columnClasses" in datatable as well as columnGroups but they didnt work. How should I do this please?

Any suggestions much appreciated!

<style>
 .col{
 text-align:left;
 }
</style>

<rich:dataTable width="600" id="resultList" rows="10" rowClasses="col"
 value="#{resultTable.records}" var="result">

 <f:facet name="header">
 <rich:columnGroup>
 <rich:column width="300px">
 <h:outputText value="Record title"/>
 </rich:column>
 <rich:column width="200px">
 <h:outputText value="Collection title"/>
 </rich:column>
 <rich:column width="100px">
 <h:outputText value="Last updated"/>
 </rich:column>
 </rich:columnGroup>
 </f:facet>
 <rich:column>
 <h:outputText value="#{result.id}"/>
 <rich:simpleTogglePanel width="300px" switchType="client" label="Summary" opened="false" style="border:0">
 <h:outputText value="#{result.summary}"/>
 </rich:simpleTogglePanel>
 </rich:column>
 <rich:column>
 <h:outputText value="#{result.collection}"/>
 </rich:column>
 <rich:column>
 <h:outputText value="#{result.lastupdated}"/>
 </rich:column>
 </rich:dataTable>