+ Start a Discussion
nlsnydernlsnyder 

Can you center the column headers in a apex page dataTable?

I have a apex:dataTable in my apex:page that works great.   I would like to center all of the column headers and some of the data values in the rows. 

 

I tried the following:

   1)  added style="text-align:center;" to the <apex:dataTable tag.   This centers the data rows (or values) but not the column headers.

   2)  added style="text-align:center;" to the apex header like this <apex:column headerValue="Product" style="text-align:center;"> but still does not center header.

  

Thanks in advance :)

Best Answer chosen by Admin (Salesforce Developers) 
imranrazaimranraza

nlsnyder,

                       Yes this is possible, you have to create a css class in your VF page. And then include in apex:column

                       Like this

                       

<apex:page standardController="Account" extensions="AccountContacts">
<style>
.ct{
text-align:center;
}
</style>

<apex:form id="frm">

<apex:pageBlock title="Accounts Info">

<apex:pageBlockTable value="{!lstacc}" var="lacc">
<apex:column headerValue="Name" headerClass="ct">
<apex:commandLink value="{!lacc.name}" onclick="show('{!lacc.id}'); return false;"/>
</apex:column>
<apex:column value="{!lacc.type}"/>
</apex:pageBlockTable>
</apex:pageBlock>

</apex:form>
</apex:page>

Regards

Imran Qureshi