function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
SazEastSazEast 

apex:datatable columns not aligned

I have an apex:data table using width attributes but the alignment of the columns is not straight, for example:

Out of line columns
I have text-align but how can I align / fix the columns? 

Thanks
 
Best Answer chosen by SazEast
Deepali KulshresthaDeepali Kulshrestha
Hi Sarah,

Please have a look: 

Use CSS in VF page

<style>
tbody{text-align:center}
</style>

for only a single table
provide any class to the table

<style>
    .tableClass tbody{text-align:center}
</style>

<apex:dataTable styleClass="tableClass">
<apex:dataTable>

And Please go through the given link for giving more Style to your dataTable According to your need:
- http://sfdcsrini.blogspot.com/2014/06/how-to-use-apexdatatable-in-visualforce.html


I hope you find the above solution helpful. If it does, please mark as Best Answer to help others too.

Thanks and Regards,
Deepali Kulshrestha

All Answers

Ajay K DubediAjay K Dubedi
Hi Sarah,
You should try below code: 
<!-- Page: -->
<apex:page controller="dataTableCon" id="thePage">
    <apex:dataTable value="{!accounts}" var="account" id="theTable" align="center" cellpadding="8" border="1">
        <apex:facet name="caption">table caption</apex:facet>
        <apex:facet name="header">table header</apex:facet>
        <apex:column>
            <apex:facet name="header">Name</apex:facet>
            <apex:outputText value="{!account.name}"/>
        </apex:column>
        <apex:column>
            <apex:facet name="header">Owner</apex:facet>
            <apex:outputText value="{!account.owner.name}"/>
        </apex:column>
    </apex:dataTable>
</apex:page>


/*** Controller: ***/

public class dataTableCon {
 List<Account> accounts;
 public List<Account> getAccounts() {
    if(accounts == null)
        accounts = [SELECT name, owner.name FROM account LIMIT 10];
        return accounts;
    }
}
I hope you find the above solution helpful. If it does, please mark as Best Answer to help others too.
Thanks,
Ajay Dubedi
Deepali KulshresthaDeepali Kulshrestha
Hi Sarah,

Please have a look: 

Use CSS in VF page

<style>
tbody{text-align:center}
</style>

for only a single table
provide any class to the table

<style>
    .tableClass tbody{text-align:center}
</style>

<apex:dataTable styleClass="tableClass">
<apex:dataTable>

And Please go through the given link for giving more Style to your dataTable According to your need:
- http://sfdcsrini.blogspot.com/2014/06/how-to-use-apexdatatable-in-visualforce.html


I hope you find the above solution helpful. If it does, please mark as Best Answer to help others too.

Thanks and Regards,
Deepali Kulshrestha
This was selected as the best answer